Feature Request: PIXI v8 support

[guillaumebrunerie]

Description

Now that PIXI v8 has been released, it would be great to have support for it in pixi-react!

[cqh963852]

I just came to pixijs-react. I'm interested in supporting pixijs v8. I found that pixijs-react uses react-reconciler.

This is a bit complicated for me, can someone explain it?

---

I wrote a demo in react 18. I want to know if there are any potential problems with this way of writing?

utils.ts

export const useTimeoutEffect = (
  callback: () => Promise<void | (() => void)>,
  deps?: React.DependencyList
) => {
  useEffect(() => {
    let promise: Promise<void | (() => void)> | undefined;
    const handler = setTimeout(() => {
      promise = callback();
    });
    return () => {
      clearTimeout(handler);
      promise?.then((dispose) => {
        dispose?.();
      });
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps);
};

import clsx from "clsx";
import { Application, Renderer } from "pixi.js";
import {
  createContext,
  CSSProperties,
  PropsWithChildren,
  useContext,
  useRef,
  useState,
} from "react";
import { useTimeoutEffect } from "../../utils";

interface IProps {
  className?: string;
  style?: CSSProperties;
}

const Context = createContext<Application<Renderer> | null>(null);

export const usePixiApp = () => {
  return useContext(Context);
};

const Scene = (props: PropsWithChildren<IProps>) => {
  let { className, style, children } = props;

  let stageContainer = useRef<HTMLDivElement>(null);
  const [pixiApp, setPixiApp] = useState<Application<Renderer> | null>(null);

  useTimeoutEffect(() => {
    const init = async () => {
      const app = new Application();
      if (stageContainer.current != null) {
        await app.init({
          resizeTo: stageContainer.current,
        });
        stageContainer.current.append(app.canvas);
        setPixiApp(app);

        return () => {
          stageContainer.current?.removeChild(app.canvas);
        };
      }
    };
    return init();
  }, []);

  return (
    <Context.Provider value={pixiApp}>
      <div
        ref={stageContainer}
        className={clsx(className, "grow overflow-hidden")}
        style={style}
      >
        {children}
      </div>
    </Context.Provider>
  );
};

export default Scene;

[guillaumebrunerie]

@cqh963852 pixi-react is a custom renderer for React, making it possible to use PIXI inside a React app using regular JSX and without having to use refs and effects like you do.

There is nothing wrong with your code, it's just not pixi-react, for instance you won't be able to use JSX inside your scene.

[rnike]

According to the message from Discord, it will be out asap

https://discord.com/channels/734147990985375826/968068526566965279/1214965701375299716

[Zyie]

Hey everyone!

Yes i hope to have a v8 version out soon. Currently i am super busy with fixing up all the bugs from the main v8 release

[montoulieu]

Hey @Zyie, was wondering if there was any update on this? Looking to use Pixi 8 with React for a client in the next few weeks. Thanks!

[CaptainStiggz]

Chiming in to say I'm also excited for this release. Working with gradients & SVGs, both of which appear to have first-class support in v8! Any idea on an ETA?

@Zyie

[trezy]

I'm closing this issue, as the future of this work will be tracked in #493. Please subscribe to that issue for further updates.