About

Simply the best way to write PIXI applications in React
_{Write PIXI applications using React declarative style 👌}

              

News!

We're delighted to announce Pixi React v7.0.0, the first major release since making it an official Pixi package!

While all the core components remain the same, there have been some significant changes under the hood:

• Full React 18 support including a new createRoot API, matching the signature of React 18's ReactDOM/client
• Full Pixi V7 support
• New up-to-date docs site
• Repository converted to a monorepo with separate @pixi/react and @pixi/animated packages
• Internally all pixi.js library imports were replaced with @pixi/ scoped package versions, providing bundlesize improvements for users who use modular builds
• Scoped imports allowed us to remove @pixi/react-legacy and @pixi/react-animated-legacy packages, with rendering deferred to a user's installed pixi.js package
• sideEffects: false added to package.json to support tree-shaking

We're excited to see what the community builds with the library and as ever please let us know on GitHub if you run into any issues, or reach out to us on the Discord to chat.

Thanks! PixiJS Team

Quick start

If you want to start a new React project from scratch, we recommend Create React App. To add to an existing React application, just install the dependencies:

Start New React Project "my-app" with Create React App:

# for typescript add "--template typescript"
npx create-react-app my-app
cd my-app

Install Pixi React Dependencies:

npm install pixi.js @pixi/react

Usage:

import { BlurFilter } from 'pixi.js';
import { Stage, Container, Sprite, Text } from '@pixi/react';
import { useMemo } from 'react';

export const MyComponent = () =>
{
  const blurFilter = useMemo(() => new BlurFilter(4), []);

  return (
    <Stage>
      <Sprite
        image="https://pixijs.io/pixi-react/img/bunny.png"
        x={400}
        y={270}
        anchor={{ x: 0.5, y: 0.5 }}
      />

      <Container x={400} y={330}>
        <Text text="Hello World" anchor={{ x: 0.5, y: 0.5 }} filters={[blurFilter]} />
      </Container>
    </Stage>
  );
};

Codepen examples

Example

Live Editor

const reducer = (_, { data }) => data; const Bunny = () => { const [motion, update] = useReducer(reducer); const iter = useRef(0); useTick((delta) => { const i = (iter.current += 0.05 * delta); update({ type: 'update', data: { x: Math.sin(i) * 100, y: Math.sin(i / 1.5) * 100, rotation: Math.sin(i) * Math.PI, anchor: Math.sin(i / 2), }, }); }); return <Sprite image="/pixi-react/img/bunny.png" {...motion} />; }; render( <Stage width={300} height={300} options={{ backgroundAlpha: 0 }}> <Container x={150} y={150}> <Bunny /> </Container> </Stage>, );

const reducer = (_, { data }) => data;

const Bunny = () => {
  const [motion, update] = useReducer(reducer);
  const iter = useRef(0);

  useTick((delta) => {
    const i = (iter.current += 0.05 * delta);

    update({
      type: 'update',
      data: {
        x: Math.sin(i) * 100,
        y: Math.sin(i / 1.5) * 100,
        rotation: Math.sin(i) * Math.PI,
        anchor: Math.sin(i / 2),
      },
    });
  });

  return <Sprite image="/pixi-react/img/bunny.png" {...motion} />;
};

render(
  <Stage width={300} height={300} options={{ backgroundAlpha: 0 }}>
    <Container x={150} y={150}>
      <Bunny />
    </Container>
  </Stage>,
);

Result

Loading...

Components

Pass PIXI properties directly as component props, example:

import { Sprite } from '@pixi/react'

const MyComponent = () => (
  <Sprite
    texture={myTexture}
    anchor={0.5}
    position={[100, 200]}
    blendMode={PIXI.BLEND_MODES.ADD}
    roundPixels={true}
    filters={[blurFilter, matrixFilter]}
  />;
);

Join us

You're missing an amazing feature? Or just want to get in touch with fellow developers and have a chat? Feel free to join our Discord channel.

Join us on Discord