extend

One of the most important concepts to understand with v8 is extend. Normally @pixi/react would have to import all pf Pixi.js to be able to provide the full library as JSX components. Instead, we use an internal catalogue of components populated by the extend API. This allows you to define exactly which parts of Pixi.js you want to import, keeping your bundle sizes small.

To allow @pixi/react to use a Pixi.js component, pass it to the extend API:

import {
    Application,
    extend,
} from '@pixi/react';
import { Container } from 'pixi.js';

extend({ Container });

const MyComponent = () => (
    <pixiContainer />
);