withFilters

Wrap your ReactPixi component with withFilters to control filter params via props.

import { AdjustmentFilter } from '@pixi/filter-adjustment';
import { Container } from '@pixi/react';

const Filters = withFilters(Container, {
  blur: PIXI.filters.BlurFilter,
  adjust: AdjustmentFilter,
});

const App = () => (
  <Stage>
    <Filters scale={2} blur={{ blur: 5 }} adjust={{ gamma: 3, brightness: 5 }}>
      <Sprite image="./image.png" />
    </Filters>
  </Stage>
);

Noticed the scale prop? All props are passed down to the wrapper component except for the filter props (indexed keys provided in the second argument of withFilters). It basically renders a <Container scale={2} filters=[...]>.

For filters that expose methods, you can use the apply prop that is called with an object containing all filter instances passed

import { Container } from '@pixi/react';

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

const App = () => (
  <Stage>
    <Filters
      matrix={{ enabled: true }}
      apply={({ matrix }) => matrix.greyscale()}
    >
      <Sprite image="./image.png" />
    </Filters>
  </Stage>
);

Example