Skip to main content

Application

The <Application> component is used to wrap your @pixi/react app. The <Application> component can take all props that can be set on PIXI.Application.

Example Usage​

import { Application } from '@pixi/react';

const MyComponent = () => (
    <Application autoStart sharedTicker />
);

Props​

defaultTextStyle​

defaultTextStyle is a convenience property. Whatever is passed will automatically be assigned to Pixi.js's TextStyle.defaultTextStyle.

[!NOTE] This property is not retroactive. It will only apply to text components created after defaultTextStyle is set. Any text components created before setting defaultTextStyle will retain the base styles they had before defaultTextStyle was changed.

extensions​

extensions is an array of extensions to be loaded. Adding and removing items from this array will automatically load/unload the extensions. The first time this is handled happens before the application is initialised. See Pixi.js's extensions documentation for more info on extensions.

resizeTo​

The <Application> component supports the resizeTo property, with some additional functionality: it can accept any HTML element or it can take a React ref directly.

import { Application } from '@pixi/react';
import { useRef } from 'react';

const MyComponent = () => {
    const parentRef = useRef(null);

    return (
        <div ref={parentRef}>
            <Application resizeTo={parentRef} />
        </div>
    );
};