1.0Beta docs?

[linonetwo]

Hi, I would like to try out your 1.0 beta, is the usage the same as 0.x ?

[michalochman]

Hi @linonetwo, the usage is the same in general with an exception of only two small differences:

1. Using ref with <Stage /> component.
2. Using react-pixi-fiber with animated or react-spring.

---

1. ref with <Stage />

If you wanted to manually access PIXI.Application with reference to Stage, then you would do:

[email protected]

function SomePixiApp() {
  const stageRef = useRef<typeof Stage | null>(null)

  useEffect(() => {
    const app = stageRef.current._app;
    console.log("PIXI.Application", { app });
  }, [])

  return <Stage ref={stageRef} />
}

[email protected]

function SomePixiApp() {
  const stageRef = useRef<typeof Stage | null>(null)

  useEffect(() => {
-    const app = stageRef.current._app;
+    const app = stageRef.current._app.current; 
    console.log("PIXI.Application", { app });
  }, [])

  return <Stage ref={stageRef} />
}

2. animated/react-spring

There is no applyProps export in 1.0.0, instead it is called applyDisplayObjectProps as it takes diffferent parameters.

[email protected]

https://github.com/michalochman/react-pixi-fiber/blob/107f87cbc961732fd26ebe959a3316ba7643802e/examples/src/AnimatedExample/animatedPixiTarget.js

[email protected]

https://github.com/michalochman/react-pixi-fiber/blob/01db5a540991cdf6de8e96f95e8199e5e7ae7fee/examples/src/AnimatedExample/animatedPixiTarget.js

[linonetwo]

Thank you, I'm not using such advanced usage, I think I can migrate to 1.0beta seamlessly.

Looking forward to your release, I think a brand-new bug-free 1.0 will make react-pixi-fiber more popular.

[michalochman]

Yes, you should not experience any issues after migration. If you do please report an issue.

There are actually not that many bug fixes in beta version.

The main driver for update to 1.0 was a change to the internal code, to make rendering working in a way similar to react-dom, as I thought this will allow for easier integration of future react features like concurrent mode.

Also developer experience was also improved with support for <React.StrictMode />. If you use it inside <Stage />, react-pixi-fiber will notify you about possible issues with PIXI component props, e.g. it will notify about invalid invalidProp prop.

const SomePixiApp() {
  return (
    <Stage>
      <React.StrictMode>
        <Container invalidProp={123} />
      </React.StrictMode>
    <Stage>
  )
}

See: https://codesandbox.io/s/brave-curie-23lnh?file=/src/App.js

This is obvious issue for TypeScript users, but nice addition when you do not use TypeScript.

[michalochman]

For 1.0.0 notes please follow #272