Skip to main content

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

PropDescriptionDefault value
widththe width of the renderers view800
heightthe height of the renderers view600
onMountcallback function for the created app instance
onUnMountcallback function when the Stage gets unmounted
rafuse the internal PIXI ticker (requestAnimationFrame)true
renderOnComponentChangerender stage on component changes. Only useful in combination with raf disabledtrue
optionssee 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

Live Editor
Result
Loading...

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:

Live Editor
Result
Loading...

Update stage manually

Disable raf and renderOnComponentChange:

Live Editor
Result
Loading...

Accessing PIXI.Application

To access the PIXI.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
};