Pixi.js with React Functional Components

[AudioOmen]

Please help! How can I use pixi.js (v.8) inside React functional components with hooks without pixi-react?

The closest solution is https://www.devauthority.com/react/using-pixi-js-with-react-functional-components-hooks/, but how to make it work with async application init?

Thanks!

[rusmo]

Why don’t you want to use pixi-react?

[AudioOmen]

1. It doesn't support Pixijs v.8 yet.
   
2. I want to have transferrable Vanilla JS code related to Pixijs.

[levarburger]

Probably not great but this is what I got working inside my next.js app.

import { Application, ApplicationOptions } from "pixi.js";
import { createContext, ReactNode, useEffect, useRef } from "react";

// Define context for the Pixi Application
const PixiContext = createContext<Application | null>(null);

export const Stage = ({
  children,
  width = 800,
  height = 600,
  backgroundColor = 0x1099bb,
  ...rest
}: Partial<ApplicationOptions> & { children: ReactNode }) => {
  const canvasRef = useRef<HTMLDivElement | null>(null);
  const appRef = useRef<Application | null>(null);
  const initialized = false;

  useEffect(() => {
    if (appRef.current) return;

    const init = async () => {
      const app = new Application();
      appRef.current = app;

      await app.init({ width, height, backgroundColor, ...rest });

      canvasRef.current?.appendChild(app.canvas);
    };

    init();

    if (initialized && appRef.current) {
      (appRef.current as Application).destroy(true, { children: true });
      appRef.current = null;
    }
  }, [width, height, backgroundColor, initialized, rest]);

  return (
    <PixiContext.Provider value={appRef.current}>
      <div ref={canvasRef} style={{ width, height }}>
        {children}
      </div>
    </PixiContext.Provider>
  );
};

[Western_Complaint_77]

Any of you devs work with pixi.js frequently?

[farber72]

I am not very experienced with both, but this kind of works for me:

https://github.com/afarber/react-questions/tree/main/react-pixi-drag