Render

You can either render your PIXI React components in the DOM or through a custom render call.

In ReactDOM

This is the most common scenario

import { Stage, Sprite } from '@pixi/react';
import { createRoot } from 'react-dom/client';

const App = () => (
  <div>
    {/* somewhere in your tree */}
    <Stage>
      <Sprite image="./bunny.png" x={100} y={100} />
    </Stage>
  </div>
);

const root = createRoot(document.getElementById('root'));
root.render(<App />);

Custom render call

You can also render a Pixi React component tree directly using the render call and bypass ReactDOM entirely:

import { createRoot, Text } from '@pixi/react';
import { Application } from 'pixi.js';

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

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

If you're removing/unmounting the container (or PIXI application), it's advisable to tear it down correctly. Simply call root.unmount():

import { render, unmountComponentAtNode, Text } from '@pixi/react';
import { Application } from 'pixi.js';

const app = new Application({...});

const root = createRoot(app.stage);
root.render(<Text text="Hello World" />);

// clean up on unmount
root.unmount();