Search code examples
reactjsnext.jspixi.js

How to work with PIXI programmatically "the old way" in react-pixi?

I'm using PIXI with Nextjs and, because of nextjs, the typical PIXI setup doesn't work. I have to use react-pixi because all PIXI+Nextjs tutorial uses react-pixi. My problem is that I find it not easy to work with PIXI "the react way". Like:

<Stage>
  <Sprite ... />
</Stage>

What I want is the old school imperative way of working with PIXI where I can add things to the stage and manipulate their hierarchy arbitrarily. Wonder how can I do that on top of react-pixi? Or is there a traditional PIXI tutorial for Nextjs?

Solution

  • found this to be good enough https://www.devauthority.com/react/using-pixi-js-with-react-functional-components-hooks/

    I use option 1 with replaceChildren