README.mdx

name	route
About React Pixi	/

import { useReducer, useRef } from 'react'; import { Playground } from 'docz' import Stage from './src/stage' import { Sprite, Container, useTick } from './src' import times from 'lodash/times'

React PIXI 🌈

              

Write PIXI applications using React declarative style 👌

<img src="https://user-images.githubusercontent.com/232559/61308019-a17f2f00-a7ef-11e9-878d-5c7775c4eccd.png" style={{ maxWidth: '100%', width: 500 }}/>

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

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

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

  useTick(delta => {
    const i = iter.current += .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={{ backgroundColor: 0x1d2230 }}>
    <Container x={150} y={150}>
      <Bunny />
    </Container>
  </Stage>
)

}}

❤️ 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!

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