README.mdx

name	route
About	/

import { useReducer, useRef } from 'react'; import { Playground } from 'docz' import { Stage, Sprite, Container, useTick } from './docz-rp';

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 @paolotozzo/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 '@paolotozzo/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 += .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 ( ) }; return ( ) }}

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