Stage

The Stage component renders a PIXI.Application onto a canvas element and makes the PIXI.Application available for child components using the React's Context API.

Props

Prop	Description	Default value
width	the width of the renderers view	800
height	the height of the renderers view	600
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 on component changes. Only useful in combination with raf disabled	true
options	see PIXI.Application options

Usage

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

const App = () => (
  <Stage width={500} height={400}>
    { // Pixi React components here... }
  </Stage>
)

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

Example

Custom Updates

By default the <Stage> component creates a Pixi.Application and updates the stage in a requestAnimationFrame loop. It tries to update and render the stage at the max browser rate (~60fps). It updates and renders the stage, even when there are no visual changes. This might result in faster running cooling fans on your computer due the overhead of GPU and CPU calculations.

Update stage on React component changes

If you want to know when components have changed, you can listen to the __REACT_PIXI_REQUEST_RENDER__ event on the root container (app.stage).

Disable raf and enable renderOnComponentChange:

Update stage manually

Disable raf and renderOnComponentChange:

Accessing Application

To access the Application in your child components you can use one of the following:

AppConsumer

import { AppConsumer } from '@pixi/react';

const MyComponent = () => <AppConsumer>{(app) => <OtherComponent app={app} />}</AppConsumer>;

withPixiApp

import { withPixiApp } from '@pixi/react';

const MyComponent = withPixiApp(OtherComponent);

useApp

import { useApp } from '@pixi/react';

const MyComponent = () => {
    const app = useApp();
    // app => PIXI.Application
};