React PIXI 🌈

Write PIXI applications using React declarative style 👌

npm install @inlet/react-pixi --save

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

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:

() => { 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={{ transparent: true }}> <Container x={150} y={150}> <Bunny /> </Container> </Stage> ) } ( ) => { 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 = { { transparent : true } } > < Container x = { 150 } y = { 150 } > < Bunny /> </ Container > </ Stage > ) }

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!

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