How to modify the properties of plugins ? about react-pixi-fiber HOT 6 CLOSED

FYI currently react-pixi-fiber is using legacy context API, not the new one.

from react-pixi-fiber.

Hi @Eldow, you have at least two options, that are documented in README:

1. Render with <Stage /> component and access renderer through app context.
2. Create your own PixiJS Application and render your own stage.

from react-pixi-fiber.

Ok I wasn't so sure as I'm still not very familiar with the new context api. Thank you for your quick reply :)

from react-pixi-fiber.

I tried to modify the renderer within a <Container /> component but it didn't triggered any changes.

Here is my main component :

<Stage
   width={window.innerWidth}
   height={window.innerHeight}
 >
   <Viewport
     screenWidth={window.innerWidth}
     screenHeight={window.innerHeight}
     worldWidth={3000}
     worldHeight={3000}
     objectToFollow={currentPlayer}
   >
     <Map />
  
    <Container zIndex={10}>
       { Object.values(players).map(player => (
         <Player
           key={player.id}
           player={player}
         />
       )) }
     </Container>
   </Viewport>
</Stage>`

And here is the beginning of my <Map> component, where i'm reading eventual user interactions.

render() {
    const { app } = this.context;
    const { rotatePlayer, attack, stopAttack } = this.props;
    app.renderer.plugins.interaction.interactionFrequency = 1000;

    return (
      <Container
        zIndex={5}
        mousemove={rotatePlayer}
        mousedown={attack}
        mouseup={stopAttack}
        interactive
        hitArea={this.hitRectangle()}
      >
// ...

Modifying the context within the component only modifies a copy of it and therefore won't work.
Is there any way to update the context given by react pixi fiber's Stage component without setting another Stage app state in the library directly ?
It may come from an incomprehension of the context API from myself but I can't find any proper example of updating the parent context within a child with the old API, except by giving a handler from the parent such as

const childContextTypes = {
  app: PropTypes.object,
  mutateApp: PropTypes.func,
};

I would really like to stick with JSX.

Regards,
Eld0w

from react-pixi-fiber.

Modifying the context within the component only modifies a copy of it and therefore won't work.

@Eldow why do you think it modifies a copy? The internal Pixi Application that is created by Stage component is passed directly via context, not a copy of it.

What is it exactly that you're trying to achieve by changing interactionFrequency?

Also, you shouldn't be mutating it every time you render in render, but rather in componentDidMount lifecycle.

from react-pixi-fiber.

Yes, I placed it there for the example sake.

I was trying to reduce the amount of times the mousemove event gets triggered but unfortunately it didn't seem to work that way. Even when setting it to 1000ms it kept firing the mousemove event every 10ms which is the default value.

PIXI documentation regarding interaction frequency

I don't get why, it may have nothing to do with react-pixi-fiber itself.

from react-pixi-fiber.