onResize

The onResize hook provides a convenient way to react to changes in the Pixi.js renderer’s dimensions. It executes a specified callback function whenever the renderer’s screen size is updated, which occurs when the browser window is resized or when the HTML element containing the PixiCanvas changes dimensions.

This hook must be called from a component that is a descendant of the <PixiApplication /> component. If used outside of this context, it will throw an error.

Usage

The onResize hook takes a single argument: a resizeCallback function. This callback receives a Pixi.Rectangle object, which contains the current width, height, x, and y of the renderer’s screen. The callback is invoked immediately upon the hook’s initialization and then again every time the renderer detects a resize event.

import { onResize, PixiApplication, PixiCanvas, PixiStage, Text } from "pixi-solid";
import { createSignal } from "solid-js";
import type * as Pixi from "pixi.js";

const MyResponsiveComponent = () => {
  const [rendererWidth, setRendererWidth] = createSignal(0);
  const [rendererHeight, setRendererHeight] = createSignal(0);

  onResize((screen: Pixi.Rectangle) => {
    setRendererWidth(screen.width);
    setRendererHeight(screen.height);
    console.log("Renderer resized to:", screen.width, "x", screen.height);
  });

  return (
    // You can use the signals to dynamically adjust your Pixi.js components
    <Text
      text={`Renderer Dimensions: ${rendererWidth()}x${rendererHeight()}`}
      position={{ x: rendererWidth() * 0.5, y: rendererHeight() * 0.5 }}
      style={{
        fill: "#ffffff",
        fontSize: 24,
      }}
    />
  );
};

export const DemoApp = () => {
  return (
    <PixiApplication background="#1099bb">
      <PixiCanvas>
        <PixiStage>
          <MyResponsiveComponent />
        </PixiStage>
      </PixiCanvas>
    </PixiApplication>
  );
};

When to use it

• To dynamically adjust the layout or scale of your Pixi.js scene in response to screen size changes.
• When implementing responsive design principles for your Pixi.js application.
• To recenter elements or reposition UI components when the available rendering area changes.
• To re-render or update certain graphics based on the new dimensions.