Skip to content

Latest commit

 

History

History
124 lines (93 loc) · 3.42 KB

README.mdx

File metadata and controls

124 lines (93 loc) · 3.42 KB
Raw
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 🌈

jest    CircleCI    license    prettier    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:

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>
)

}}

Donate

If this project help you reduce time to develop, you can buy me a cup of coffee.

🙏 Thanks!

paypal