👌 React PIXI
Edit page
AboutInstallUsageCustom ComponentsExample❤️ SupportWe're on Slack
Components
HOC
HooksStageTypeScript

React PIXI 🌈

release    downloads    CircleCI    license    react    pixi

Write PIXI applications using React declarative style 👌

Install

npm install @inlet/react-pixi --save

Usage

import { Stage, Sprite } from '@inlet/react-pixi';
const App = () => (
<Stage>
<Sprite image="./bunny.png" x={100} y={100} />
</Stage>
);

Codepen examples

API Docs on Github

Custom Components

ReactPixi has a few built-in components (like Container, Sprite, etc), but doesn't cover all pixi.js components. However, you can easily create new components with PixiComponent that is automatically picked up by React's reconciler:

import { Graphics } from 'pixi.js';
import { PixiComponent, Stage } from '@inlet/react-pixi';
const Rectangle = PixiComponent('Rectangle', {
create: props => new Graphics(),
applyProps: (instance, _, props) => {
const { x, y, width, height, fill } = props;
instance.clear();
instance.beginFill(fill);
instance.drawRect(x, y, width, height);
instance.endFill();
},
});
const App = () => (
<Stage>
<Rectangle x={100} y={100} width={500} height={300} fill={0xff0000} />
</Stage>
);

Codepen examples:

  • Particle Emitter
  • Animated Sprite
  • Display

Example

❤️ Support

If this project helps you reduce time to develop and/or you want to help the maintainer of this project. You can sponsor him. Thank you!

paypal

We're on Slack

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