👌 ReactPixi
Edit page
AboutInstallUsageExampleComponentsDonateJoin usCDN Links
Components
Custom ComponentsFallback to Canvas
HOC
HooksReact-SpringRenderStageTypeScript

React PIXI 🌈

release    downloads    CircleCI    license    react    pixi

Write PIXI applications using React declarative style 👌

Install

npm install @inlet/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 '@inlet/react-pixi';
const App = () => (
<Stage>
<Sprite image="./bunny.png" x={100} y={100} />
</Stage>
);

Codepen examples

Example

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]}
/>;
);

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