TickerProvider

The TickerProvider component allows you to provide a custom Pixi.Ticker instance to child components without requiring a full PixiApplication or PixiCanvas.

It can be used to wrap subtrees of components that you want to provide an additional ticker context to support multiple independent tickers in the same application.

This component provides context for ticker-dependent utilities like onTick, delay, createAsyncDelay, and getTicker.

Independent ticker context for subtrees

You can also nest TickerProvider to give a specific subtree its own independent ticker while the rest of the application uses the default ticker. This is useful when you want different parts of your scene to animate at different rates or be controlled separately.

import { PixiCanvas, Container, TickerProvider, onTick } from "pixi-solid";
import { Sprite } from "pixi-solid";
import { Texture, Ticker } from "pixi.js";
import { createSignal, onCleanup } from "solid-js";

// Component that rotates using the context ticker
const RotatingSprite = () => {
  const [rotation, setRotation] = createSignal(0);

  onTick((ticker) => {
    setRotation((r) => r + 0.01 * ticker.deltaTime);
  });

  return <Sprite texture={Texture.WHITE} rotation={rotation()} x={100} y={100} />;
};

export const DemoApp = () => {
  // Create a separate ticker for the slow-moving subtree
  const slowTicker = new Ticker();
  slowTicker.speed = 0.5; // Half speed
  slowTicker.start();

  // Cleanup the ticker when the component unmounts to prevent memory leaks
  onCleanup(() => {
    slowTicker.stop();
    slowTicker.destroy();
  });

  return (
    <PixiCanvas style={{ width: "100%", height: "100dvh" }}>
      <Container>
        {/* Uses the default canvas ticker */}
        <RotatingSprite />

        {/* Uses its own slower ticker */}
        <TickerProvider ticker={slowTicker}>
          <RotatingSprite />
        </TickerProvider>
      </Container>
    </PixiCanvas>
  );
};

In this example, the first RotatingSprite rotates at normal speed using the canvas's default ticker, while the second RotatingSprite inside the TickerProvider rotates at half speed using its own custom ticker.

Props

• ticker: Pixi.Ticker - The ticker instance to provide to child components (required)
• children: JSX.Element - The child components that will have access to the ticker context

When to use it

• When you need ticker functionality without a full PixiJS application
• When integrating multiple independent Pixi.js rendering contexts
• For advanced scenarios where you need manual control over the ticker instance
• When using ticker utilities like onTick or delay outside of a PixiCanvas

Relationship to other components

• PixiCanvas and PixiApplicationProvider both internally provide a ticker through context
• TickerProvider is a lighter-weight alternative when you only need ticker functionality
• Use TickerProvider if you need a ticker for utilities but don't need a full Pixi Application instance

Further reading

• Read more about the Pixi.Ticker class in the PixiJS documentation
• See related hooks: onTick, getTicker, delay, createAsyncDelay