👌 ReactPixi
Edit page
AboutCDN Links
Components
Custom ComponentsAPIExampleProps helperFallback to Canvas
HOC
HooksReact-SpringRenderStageTypeScript

Custom Components

To tap into the React reconciliation you can create custom components with PixiComponent.

ReactPixi covers a set of 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:

API

export default PixiComponent('ComponentName', {
create: props => {
return new Graphics()
},
didMount: (instance, parent) => {
// apply custom logic on mount
},
willUnmount: (instance, parent) => {
// clean up before removal
},
applyProps: (instance, oldProps, newProps) => {
// props changed
// apply logic to the instance
},
})

Example

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

Some use cases:

  • Particle Emitter
  • Pixi Viewport

Props helper

ReactPixi comes with a handy utility method applyDefaultProps that can help you applying props directly to a PIXI primitive instance handling events, PIXI props and point-like values.

Here's an example to pass through every other DisplayObject props and handle prop count separately:

import { Text } from 'pixi.js'
import { Stage, applyDefaultProps, PixiComponent } from '@inlet/react-pixi'
export default PixiComponent('Counter', {
create: ({ count }) => {
return new Text(count.toString())
},
applyProps: (instance, oldProps, newProps) => {
const { count, ...oldP } = oldProps
const { count, ...newP } = newProps
// apply rest props to PIXI.Text
applyDefaultProps(instance, oldP, newP)
// set new count
instance.text = count.toString()
},
})