AboutCDN LinksCustom ComponentsAPIExampleProps helperFallback to CanvasHooksReact-SpringRenderStageTypeScript
Components
HOC
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:
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 } = oldPropsconst { count, ...newP } = newProps// apply rest props to PIXI.TextapplyDefaultProps(instance, oldP, newP)// set new countinstance.text = count.toString()},})