React Pixi

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

News!

ReactPixi will be a first-party React layer for PIXI and maintained by the core devs of PIXI!

Dear ReactPixi community,

I am thrilled to announce that ReactPixi, the premier library for using Pixi.js with React, is being officially transferred to the Pixi team! This project started as a passion of mine, and it quickly grew into a beloved resource for the Pixi community thanks to all of your support. We are excited to be working closely with the team at Pixi, to continue improving and supporting the library. We want to extend a huge thank you to everyone who has supported ReactPixi over the years, and we especially want to thank Mat Groves for making this transfer possible. We can't wait to see what the future holds for the library under the stewardship of the Pixi team. Stay tuned for updates and new developments as we work together to take ReactPixi to the next level!

Sincerely, Patrick Brouwer

Install

npm install @inlet/react-pixi --save

or use CDN:

<script crossorigin src="https://unpkg.com/@inlet/react-pixi/dist/react-pixi.umd.js"></script>

Usage

import { Stage, Sprite } from '@inlet/react-pixi'

const App = () => (
  <Stage>
    <Sprite image="./bunny.png" x={100} y={100} />
  </Stage>
)

Codepen examples

Example

() => {
  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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/693612/IaUrttj.png"
        {...motion}
      />
    )
  }
  return (
    <Stage width={300} height={300} options={{ backgroundAlpha: 0 }}>
      <Container x={150} y={150}>
        <Bunny />
      </Container>
    </Stage>
  )
}

Components

Pass PIXI properties directly as component props, example:

import { Sprite } from '@inlet/react-pixi'

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

Donate

If you are enthusiast and this project helps reducing your development time, or you just want to show your gratitude to the creator and maintainer of the project, please buy me a coffee, thanks so much!

Make a donation

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 Slack channel.

Join us on Slack