What is the correct way to pass a Sprite to a displacementFilter?

Question

I'm trying to use a displacementFilter from PixiJs in a React app, this is my code:

const Filter = withFilters(Container, {
    displacement: filters.DisplacementFilter,
})

<Filter displacement={{ displacement: displacementSprite.current }} scale={{ x: scaleX, y: 0 }}>
    <AppConsumer>{ app =>
            <Sprite
              onMount={setup(app)}
              ref={displacementSprite}
              image={ripple}
              anchor={0.5}
              x={app.renderer.width / 2}
              y={app.renderer.height / 2}
            />}
    </AppConsumer>
</Filter>

But i get the error Cannot set property 'renderable' of undefined, maybe i'm missing something because i'm trying to pass the sprite through a React Ref. What is the correct way to pass a Sprite to a displacementFilter?

I'm using @inlet/react-pixi version: ^1.2.19 and Pixi v5

Answer 1

Fixed in issue #218

<Filters displacement={{ construct: [MySprite], ...otherDisplacementMembers }}>

Note: The Displacement filter needs a sprite as a reference and it needs to be added to the scene else you'll get the no renderable error. Use a ready state and render the filters should do the trick though.

Working codepen thanks to Inlet (mantainer of @inlet/react-pixi)