Skip to main content

Pixi.js Components

All Pixi.js classes should be available as components. They should also be included in your IDE's intellisense/autocomplete once you've installed/imported @pixi/react. So long as it's exported from Pixi.js, it's supported as a component with the pixi prefix. Here's a selection of commonly used components:

<pixiContainer />
<pixiGraphics />
<pixiSprite />
<pixiAnimatedSprite />
<pixiText />
<pixiHtmlText />

Additionally, all properties of Pixi.js classes are available as properties on these components.

<pixiContainer x={100} y={100}>
    <pixiSprite anchor={{ 0.5, 0.5 }} texture={texture} />
</pixiContainer>

Special Properties​

Some components have special properties to support non-conforming APIs.

<pixiGraphics>​

draw​

draw takes a callback which receives the Graphics context. Drawing will happen on every tick.

<pixiGraphics draw={(graphics) => {
    graphics.clear();
    graphics.setFillStyle({ color: 'red' });
    graphics.rect(0, 0, 100, 100);
    graphics.fill();
}} />