How to use react-pixi-fiber - 10 common examples

import ReactDOM from "react-dom";
import * as ReactPixiFiber from "react-pixi-fiber";

// react-pixi like API
// Note: ReactPIXI.factories is not supported

export const CustomPIXIComponent = ReactPixiFiber.CustomPIXIComponent;
export const render = ReactDOM.render;
export const unmountComponentAtNode = ReactDOM.unmountComponentAtNode;
export const BitmapText = ReactPixiFiber.BitmapText;
export const DisplayObjectContainer = ReactPixiFiber.Container;
export const Graphics = ReactPixiFiber.Graphics;
export const ParticleContainer = ReactPixiFiber.ParticleContainer;
export const Sprite = ReactPixiFiber.Sprite;
export const Stage = ReactPixiFiber.Stage;
export const Text = ReactPixiFiber.Text;
export const TilingSprite = ReactPixiFiber.TilingSprite;

const ReactPIXI = {
  // Render methods
  CustomPIXIComponent,
  render,
  unmountComponentAtNode,
  // Components
  BitmapText,
  DisplayObjectContainer,

import ReactDOM from "react-dom";
import * as ReactPixiFiber from "react-pixi-fiber";

// react-pixi like API
// Note: ReactPIXI.factories is not supported

export const CustomPIXIComponent = ReactPixiFiber.CustomPIXIComponent;
export const render = ReactDOM.render;
export const unmountComponentAtNode = ReactDOM.unmountComponentAtNode;
export const BitmapText = ReactPixiFiber.BitmapText;
export const DisplayObjectContainer = ReactPixiFiber.Container;
export const Graphics = ReactPixiFiber.Graphics;
export const ParticleContainer = ReactPixiFiber.ParticleContainer;
export const Sprite = ReactPixiFiber.Sprite;
export const Stage = ReactPixiFiber.Stage;
export const Text = ReactPixiFiber.Text;
export const TilingSprite = ReactPixiFiber.TilingSprite;

const ReactPIXI = {
  // Render methods
  CustomPIXIComponent,
  render,
  unmountComponentAtNode,
  // Components
  BitmapText,
  DisplayObjectContainer,
  Graphics,

import ReactDOM from "react-dom";
import * as ReactPixiFiber from "react-pixi-fiber";

// react-pixi like API
// Note: ReactPIXI.factories is not supported

export const CustomPIXIComponent = ReactPixiFiber.CustomPIXIComponent;
export const render = ReactDOM.render;
export const unmountComponentAtNode = ReactDOM.unmountComponentAtNode;
export const BitmapText = ReactPixiFiber.BitmapText;
export const DisplayObjectContainer = ReactPixiFiber.Container;
export const Graphics = ReactPixiFiber.Graphics;
export const ParticleContainer = ReactPixiFiber.ParticleContainer;
export const Sprite = ReactPixiFiber.Sprite;
export const Stage = ReactPixiFiber.Stage;
export const Text = ReactPixiFiber.Text;
export const TilingSprite = ReactPixiFiber.TilingSprite;

const ReactPIXI = {
  // Render methods
  CustomPIXIComponent,
  render,
  unmountComponentAtNode,
  // Components
  BitmapText,
  DisplayObjectContainer,
  Graphics,
  ParticleContainer,

import ReactDOM from "react-dom";
import * as ReactPixiFiber from "react-pixi-fiber";

// react-pixi like API
// Note: ReactPIXI.factories is not supported

export const CustomPIXIComponent = ReactPixiFiber.CustomPIXIComponent;
export const render = ReactDOM.render;
export const unmountComponentAtNode = ReactDOM.unmountComponentAtNode;
export const BitmapText = ReactPixiFiber.BitmapText;
export const DisplayObjectContainer = ReactPixiFiber.Container;
export const Graphics = ReactPixiFiber.Graphics;
export const ParticleContainer = ReactPixiFiber.ParticleContainer;
export const Sprite = ReactPixiFiber.Sprite;
export const Stage = ReactPixiFiber.Stage;
export const Text = ReactPixiFiber.Text;
export const TilingSprite = ReactPixiFiber.TilingSprite;

const ReactPIXI = {
  // Render methods
  CustomPIXIComponent,
  render,
  unmountComponentAtNode,
  // Components
  BitmapText,
  DisplayObjectContainer,
  Graphics,
  ParticleContainer,
  Sprite,

import ReactDOM from "react-dom";
import * as ReactPixiFiber from "react-pixi-fiber";

// react-pixi like API
// Note: ReactPIXI.factories is not supported

export const CustomPIXIComponent = ReactPixiFiber.CustomPIXIComponent;
export const render = ReactDOM.render;
export const unmountComponentAtNode = ReactDOM.unmountComponentAtNode;
export const BitmapText = ReactPixiFiber.BitmapText;
export const DisplayObjectContainer = ReactPixiFiber.Container;
export const Graphics = ReactPixiFiber.Graphics;
export const ParticleContainer = ReactPixiFiber.ParticleContainer;
export const Sprite = ReactPixiFiber.Sprite;
export const Stage = ReactPixiFiber.Stage;
export const Text = ReactPixiFiber.Text;
export const TilingSprite = ReactPixiFiber.TilingSprite;

const ReactPIXI = {
  // Render methods
  CustomPIXIComponent,
  render,
  unmountComponentAtNode,
  // Components
  BitmapText,
  DisplayObjectContainer,
  Graphics,
  ParticleContainer,
  Sprite,
  Stage,

import ReactDOM from "react-dom";
import * as ReactPixiFiber from "react-pixi-fiber";

// react-pixi like API
// Note: ReactPIXI.factories is not supported

export const CustomPIXIComponent = ReactPixiFiber.CustomPIXIComponent;
export const render = ReactDOM.render;
export const unmountComponentAtNode = ReactDOM.unmountComponentAtNode;
export const BitmapText = ReactPixiFiber.BitmapText;
export const DisplayObjectContainer = ReactPixiFiber.Container;
export const Graphics = ReactPixiFiber.Graphics;
export const ParticleContainer = ReactPixiFiber.ParticleContainer;
export const Sprite = ReactPixiFiber.Sprite;
export const Stage = ReactPixiFiber.Stage;
export const Text = ReactPixiFiber.Text;
export const TilingSprite = ReactPixiFiber.TilingSprite;

const ReactPIXI = {
  // Render methods
  CustomPIXIComponent,
  render,
  unmountComponentAtNode,
  // Components
  BitmapText,
  DisplayObjectContainer,
  Graphics,
  ParticleContainer,
  Sprite,
  Stage,
  Text,

import ReactDOM from "react-dom";
import * as ReactPixiFiber from "react-pixi-fiber";

// react-pixi like API
// Note: ReactPIXI.factories is not supported

export const CustomPIXIComponent = ReactPixiFiber.CustomPIXIComponent;
export const render = ReactDOM.render;
export const unmountComponentAtNode = ReactDOM.unmountComponentAtNode;
export const BitmapText = ReactPixiFiber.BitmapText;
export const DisplayObjectContainer = ReactPixiFiber.Container;
export const Graphics = ReactPixiFiber.Graphics;
export const ParticleContainer = ReactPixiFiber.ParticleContainer;
export const Sprite = ReactPixiFiber.Sprite;
export const Stage = ReactPixiFiber.Stage;
export const Text = ReactPixiFiber.Text;
export const TilingSprite = ReactPixiFiber.TilingSprite;

const ReactPIXI = {
  // Render methods
  CustomPIXIComponent,
  render,
  unmountComponentAtNode,
  // Components
  BitmapText,
  DisplayObjectContainer,
  Graphics,
  ParticleContainer,
  Sprite,
  Stage,
  Text,
  TilingSprite,

import * as ReactPixiFiber from "react-pixi-fiber";

// react-pixi like API
// Note: ReactPIXI.factories is not supported

export const CustomPIXIComponent = ReactPixiFiber.CustomPIXIComponent;
export const render = ReactDOM.render;
export const unmountComponentAtNode = ReactDOM.unmountComponentAtNode;
export const BitmapText = ReactPixiFiber.BitmapText;
export const DisplayObjectContainer = ReactPixiFiber.Container;
export const Graphics = ReactPixiFiber.Graphics;
export const ParticleContainer = ReactPixiFiber.ParticleContainer;
export const Sprite = ReactPixiFiber.Sprite;
export const Stage = ReactPixiFiber.Stage;
export const Text = ReactPixiFiber.Text;
export const TilingSprite = ReactPixiFiber.TilingSprite;

const ReactPIXI = {
  // Render methods
  CustomPIXIComponent,
  render,
  unmountComponentAtNode,
  // Components
  BitmapText,
  DisplayObjectContainer,
  Graphics,
  ParticleContainer,
  Sprite,
  Stage,
  Text,
  TilingSprite,
};

batched = () => {
    // render once
    asyncFunc(unstable_batchedUpdates(this.setStateTwice));
  };

function useAnimatedValue({ direction, max, min, value }) {
  const [data, setData] = useState({
    direction,
    value,
  });

  usePixiTicker(() => {
    // perform all the logic inside setData so useEffect's dependency array
    // can be empty so it will only trigger one on initial render and not
    // add and remove from ticker constantly.
    setData(current => {
      const data = { ...current };

      // flip direction once min or max has been reached.
      if ((current.value >= max && current.direction === 1) || (current.value <= min && current.direction === -1)) {
        data.direction *= -1;
      }

      // increment or decrement `
      data.value += data.direction;

      return data;
    });