README.mdx

name	order	route
About React Pixi	0	/

React PixiJS

Write PixiJS applications using React declarative style.

Collaborate on Github: https://github.com/inlet/react-pixi

Install

Node

npm install @inlet/react-pixi --save

Browser

<script src="https://unpkg.com/@inlet/react-pixi@latest/dist/react-pixi.umd.js"></script>
<script>
  // window.ReactPixi
</script>

Usage

With React-DOM

Stage renders a canvas element. All child components are rendered on the canvas.

import { Stage, Sprite } from '@inlet/react-pixi'

const App = () => (
  <Stage>
    <Sprite image="./bunny.png" x={100} y={100} />
  </Stage>
)

Without React-DOM

import { render, Text } from '@inlet/react-pixi'
import * as PIXI from 'pixi.js'

// init PIXI.Application manually
const app = new PIXI.Application(800, 600, {
  backgroundColor: 0x10bb99,
  view: document.getElementById('container')
})

// Use the custom renderer to render a valid PIXI object into a PIXI container.
render(<Text text="Hello World" x={200} y={200} />, app.stage)

Examples

Watch the collection on codepen.

• Text
• Sprite - Rotating Bunny
• Tiling Sprite
• Graphics
• Interaction - Click
• Rope
• Custom Components
• NineSlicePlane
• Custom Render - Without Stage

Custom Components

Currently the following Components are implemented by default:

• Container
• ParticleContainer
• Sprite
• TilingSprite
• Graphics
• Mesh
• Rope
• Text
• BitmapText
• NineSlicePlane

You can easily add new components to your project:

// ./components/Rectangle.jsx

import * as PIXI from 'pixi.js'
import { PixiComponent } from '@inlet/react-pixi'

export default PixiComponent('Rectangle', {
  create: props => {
    return new PIXI.Graphics()
  },
  didMount: (instance, parent) => {
    // apply custom logic on mount
  },
  willUnmount: (instance, parent) => {
    // clean up before removal
  },
  applyProps: (instance, oldProps, newProps) => {
    const { fill, x, y, width, height } = newProps
    instance.clear()
    instance.beginFill(fill)
    instance.drawRect(x, y, width, height)
    instance.endFill()
  }
})

// App.jsx

import { Stage } from '@inlet/react-pixi'
import Rectangle from './components/Rectangle'
export default () => (
  <Stage>
    <Rectangle x={100} 
               y={100} 
               width={500} 
               height={300} 
               fill={0xff0000} />
  </Stage>
)

Access PIXI Application

Accessing the PIXI.Application instance in child components.

Via Render Props (function as child)

// App.jsx

import { Stage, Container, AppConsumer } from '@inlet/react-pixi'
import { RotatingBunny } from './components/RotatingBunny'

export default () => (
  <Stage>
    <Container>
      <AppConsumer>
        {app => <RotatingBunny app={app} />}
      </AppConsumer>
    </Container>
  </Stage>
)

Via Higher Order Component withPixiApp

// App.jsx

import { Stage, Container, withPixiApp } from '@inlet/react-pixi'
import { RotatingBunny } from './components/RotatingBunny'

const BunnyWithApp = withPixiApp(RotatingBunny)

export default () => (
  <Stage>
    <Container>
      <BunnyWithApp />
    </Container>
  </Stage>
)

Use hooks API in Functional Components

Note that you can also use the useTick hook to listen for ticker events.

// RotatingBunny.jsx

import { useApp } from '@inlet/react-pixi'

function RotatingBunny(props) {
  const app = useApp()
  // app => PIXI.Application

  return (
    ...
  )
}

The RotatingBunny class component could look something like this:

// ./components/RotatingBunny.jsx

import { Sprite } from '@inlet/react-pixi'

class RotatingBunny extends React.Component {

  state = { rotation: 0 }

  componentDidMount() {
    // listen to tick events (raf)
    this.props.app.ticker.add(this.tick)
  }
  
  componentWillUnmount() {
    // stop listening for tick events
    this.props.app.ticker.remove(this.tick)
  }
  
  tick = (delta) => {
      // rotate this sucker 🙌
      this.setState(({ rotation }) => ({
          rotation: rotation + 0.1 * delta
      }))
  };
  
  render() {
    return <Sprite image="./bunny.png" rotation={this.state.rotation} />
  }
}

Stage

Renders a PIXI.Application in a prebuilt React component using React-DOM.

See Usage

Example:

import { render } from 'react-dom'
import { Stage, Container } from '@inlet/react-pixi'

const App = () => (
  <Stage width={500} height={400} options={{ backgroundColor: 0xff0000 }}>
    <Container></Container>
  </Stage>
)

render(<App />, document.getElementById('root'))

Props

Prop	Description	Default value
width	the width of the renderers view	800
height	the height of the renderers view	800
onMount	callback function for the created app instance
onUnMount	callback function when the Stage gets unmounted
raf	use the internal PIXI ticker (requestAnimationFrame)	true
renderOnComponentChange	render stage when the Stage component updates. This is ignored if raf is true.	true
options	see PIXI.Application options

The Stage stores the created PIXI.Application instance to context, which can be accessed using a Provider or a Higher Order Component.

Components

Pass down PIXI options as props. Reference the PIXI documentation to see what properties can be applied.

For example The Sprite can have x and y values as writable members:

import { Sprite } from '@inlet/react-pixi'

const MyComponent = () => (
  <Sprite image=".image.png" x={100} y={200} />
)

The image prop here is shorthand for PIXI.Sprite.fromImage():

import { Sprite } from '@inlet/react-pixi'

const texture = new PIXI.Sprite.fromImage('./image.png')

const MyComponent = () => (
  <Sprite texture={texture} x={100} y={200} />
)