👌 ReactPixi
Edit page
AboutCDN Links
Components
Custom ComponentsAPIProps helperCompose above Custom ComponentsExample ViewportExample Particle EmitterFallback to Canvas
HOC
HooksReact-SpringRenderStageTypeScript

Custom Components

ReactPixi already covers a large set of PIXI components (like <Container>, <Sprite>, <Graphics> and many more), but in some use cases you'd like to add new "reconciler primitive" components.

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

API

export default PixiComponent('ComponentName', {
  create: props => {
    // instantiate something and return it.
    // for instance:
    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
  },
})

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()
  },
})

Compose above Custom Components

In most cases you can use simple React compositions. A rule of thumb is to use custom components for instances that are not present in ReactPixi components.

Example, don't do:

PixiComponent('Rectangle', {
  create: () => new PIXI.Sprite(),
  applyProps: () => {...}
});

Instead use a simple React composition as <Sprite> is already present in ReactPixi:

const Rectangle = (props) => <Sprite {...props}>;

Example Viewport

Example Particle Emitter