Bug: TSC throw error for TS type of apply prop on Filters component

[mrdulin]

Current Behavior

Type '{ children: Element; matrix: { enabled: true; }; apply: ({ matrix }: { matrix: any; }) => any; }' is not assignable to type 'IntrinsicAttributes & Partial<Omit<Container, P | ReadonlyKeys<Container>> & WithPointLike<...>> & InteractionEvents & { ...; } & { ...; } & Partial<...>'.
Property 'apply' does not exist on type 'IntrinsicAttributes & Partial<Omit<Container, P | ReadonlyKeys<Container>> & WithPointLike<...>> & InteractionEvents & { ...; } & { ...; } & Partial<...>'.(2322)

Expected Behavior

The TS type of apply prop on Filters should correct.

Steps to Reproduce

import * as PIXI from 'pixi.js';
import { Container, Stage, withFilters, Sprite } from '@pixi/react';

const Filters = withFilters(Container, {
  matrix: PIXI.ColorMatrixFilter,
});

function App() {
  return (
    <Stage>
      <Filters
        matrix={{ enabled: true }}
        apply={({ matrix }) => matrix.greyscale()}
      >
        <Sprite image="https://pixijs.com/assets/bg_grass.jpg" />
      </Filters>
    </Stage>
  );
}

export default App;

Environment

{
  "name": "vite-react-typescript-starter",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@pixi/filter-adjustment": "^5.1.1",
    "@pixi/react": "^7.1.2",
    "pixi.js": "^8.1.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@types/react": "^18.3.2",
    "@types/react-dom": "^18.3.0",
    "@typescript-eslint/eslint-plugin": "^7.8.0",
    "@typescript-eslint/parser": "^7.8.0",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.2",
    "eslint-plugin-react-refresh": "^0.4.7",
    "typescript": "^5.2.2",
    "vite": "^5.2.11"
  }
}

Possible Solution

No response

Additional Information

Following the guide on withFilters doc.

stackblitz

[delasource]

you are using pixi v8 and pixi-react v7. These are not compatible. As stated here you probably want to stick with pixi v7 until this library supports v8.

[mrdulin]

@delasource OK, Thanks. Then I think pixi-react v7 should add pixi v7 as its peer dependency so that I will get the warning when run npm install.