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

Result

Loading...

Live Editor

// import { render } from 'react-dom'; // import { Stage, Sprite } from '@pixi/react'; // import lodash from 'lodash'; const count = 10; const width = 300; const height = 300; const stageProps = { height, width, options: { backgroundAlpha: 0, antialias: true, }, }; render( <Stage {...stageProps}> {lodash.times(count, (i) => ( <Sprite key={i} image="/pixi-react/img/coin.png" scale={(360 / count) * 0.004} anchor={0.5} rotation={i * (360 / count) * (Math.PI / 180)} x={width / 2 + Math.cos(i * (360 / count) * (Math.PI / 180)) * 100} y={height / 2 + Math.sin(i * (360 / count) * (Math.PI / 180)) * 100} /> ))} </Stage>, );

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

const count = 10;
const width = 300;
const height = 300;
const stageProps = {
  height,
  width,
  options: {
    backgroundAlpha: 0,
    antialias: true,
  },
};

render(
  <Stage {...stageProps}>
    {lodash.times(count, (i) => (
      <Sprite
        key={i}
        image="/pixi-react/img/coin.png"
        scale={(360 / count) * 0.004}
        anchor={0.5}
        rotation={i * (360 / count) * (Math.PI / 180)}
        x={width / 2 + Math.cos(i * (360 / count) * (Math.PI / 180)) * 100}
        y={height / 2 + Math.sin(i * (360 / count) * (Math.PI / 180)) * 100}
      />
    ))}
  </Stage>,
);

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:

Result

Loading...

Live Editor

// import { Stage, Sprite } from '@pixi/react'; function DisableRAFExample() { // a simple incremental hook // https://gist.github.com/inlet/3e80965127d16c056da247f66839f51d const i = useIteration(0.1); return ( <Stage width={300} height={300} raf={false} renderOnComponentChange={true} options={{ antialias: true, backgroundAlpha: 0 }} > <Sprite anchor={[-(2 + Math.sin(i / 5) * 2), 0.5]} position={150} rotation={(Math.PI / 180) * 90 + -i} image="/pixi-react/img/bunny.png" /> </Stage> ); }

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

function DisableRAFExample() {
  // a simple incremental hook
  // https://gist.github.com/inlet/3e80965127d16c056da247f66839f51d
  const i = useIteration(0.1);

  return (
    <Stage
      width={300}
      height={300}
      raf={false}
      renderOnComponentChange={true}
      options={{ antialias: true, backgroundAlpha: 0 }}
    >
      <Sprite
        anchor={[-(2 + Math.sin(i / 5) * 2), 0.5]}
        position={150}
        rotation={(Math.PI / 180) * 90 + -i}
        image="/pixi-react/img/bunny.png"
      />
    </Stage>
  );
}

Update stage manually

Disable raf and renderOnComponentChange:

Result

Loading...

Live Editor

// import { useState } from 'react'; // import { Stage, Sprite } from '@pixi/react'; function DisableRAFWithManualRenderExample() { const [app, setApp] = useState(); const i = useIteration(0.1); return ( <div style={{ display: 'flex', flexDirection: 'column' }}> <Stage width={300} height={300} raf={false} renderOnComponentChange={false} onMount={setApp} options={{ backgroundColor: 0xeef1f5, antialias: true }} > <Sprite anchor={0.5} position={[150 + Math.cos(i) * 50, 150]} rotation={i} image="/pixi-react/img/bunny.png" /> </Stage> <button style={{ margin: '20px auto 0 0' }} onClick={() => app.renderer.render(app.stage)} > Render </button> </div> ); }

// import { useState } from 'react';
// import { Stage, Sprite } from '@pixi/react';

function DisableRAFWithManualRenderExample() {
  const [app, setApp] = useState();
  const i = useIteration(0.1);

  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <Stage
        width={300}
        height={300}
        raf={false}
        renderOnComponentChange={false}
        onMount={setApp}
        options={{ backgroundColor: 0xeef1f5, antialias: true }}
      >
        <Sprite
          anchor={0.5}
          position={[150 + Math.cos(i) * 50, 150]}
          rotation={i}
          image="/pixi-react/img/bunny.png"
        />
      </Stage>
      <button
        style={{ margin: '20px auto 0 0' }}
        onClick={() => app.renderer.render(app.stage)}
      >
        Render
      </button>
    </div>
  );
}

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
};