Application Component

/**
 * Root component that creates and manages a PixiJS Application
 * @param props - Application configuration and React props
 * @param ref - React ref providing access to application and canvas
 */
const Application: React.ForwardRefExoticComponent<ApplicationProps & React.RefAttributes<ApplicationRef>>;

interface ApplicationProps extends BaseApplicationProps, Partial<ApplicationOptions> {
  /** CSS classes to be applied to the canvas element */
  className?: string;
  /** Child components to render in the PixiJS scene */
  children?: PixiReactChildNode;
  /** Default style to be applied to text nodes */
  defaultTextStyle?: TextStyle | TextStyleOptions;
  /** Array of Pixi extensions to be loaded before initialization */
  extensions?: (ExtensionFormatLoose | any)[];
  /** Callback fired when the application finishes initializing */
  onInit?: (app: PixiApplication) => void;
  /** Element or ref to which the application's canvas will be resized */
  resizeTo?: HTMLElement | Window | RefObject<HTMLElement | null>;
}

interface ApplicationRef {
  /** Get the PixiJS Application instance */
  getApplication(): PixiApplication | null;
  /** Get the canvas element */
  getCanvas(): HTMLCanvasElement | null;
}

import { Application, extend } from "@pixi/react";
import { Container, Text } from "pixi.js";
import { useRef } from "react";

extend({ Container, Text });

// Basic usage
const BasicExample = () => (
  <Application width={800} height={600}>
    <pixiContainer>
      <pixiText text="Hello World!" x={100} y={100} />
    </pixiContainer>
  </Application>
);

// With ref and initialization callback
const AdvancedExample = () => {
  const appRef = useRef<ApplicationRef>(null);

  const handleInit = (app: PixiApplication) => {
    console.log("Application initialized:", app);
    // Configure application settings
    app.ticker.maxFPS = 60;
  };

  const getAppInfo = () => {
    const app = appRef.current?.getApplication();
    const canvas = appRef.current?.getCanvas();
    console.log("App:", app, "Canvas:", canvas);
  };

  return (
    <Application
      ref={appRef}
      width={1024}
      height={768}
      backgroundColor="0x1099bb"
      onInit={handleInit}
    >
      <pixiContainer>
        <pixiText text="Click to log app info" interactive onPointerTap={getAppInfo} />
      </pixiContainer>
    </Application>
  );
};

// With resizing and custom styling
const ResponsiveExample = () => {
  const containerRef = useRef<HTMLDivElement>(null);

  return (
    <div ref={containerRef} style={{ width: "100%", height: "400px" }}>
      <Application
        resizeTo={containerRef}
        className="pixi-canvas"
        antialias={true}
        resolution={window.devicePixelRatio || 1}
      >
        <pixiContainer>
          <pixiText text="Responsive Canvas" anchor={0.5} x={400} y={200} />
        </pixiContainer>
      </Application>
    </div>
  );
};

interface ApplicationOptions {
  width?: number;
  height?: number;
  backgroundColor?: ColorSource;
  backgroundAlpha?: number;
  antialias?: boolean;
  resolution?: number;
  autoDensity?: boolean;
  powerPreference?: WebGLPowerPreference;
  premultipliedAlpha?: boolean;
  preserveDrawingBuffer?: boolean;
  clearBeforeRender?: boolean;
  hello?: boolean;
}

import { Application } from "@pixi/react";
import { ParticleContainer } from "pixi.js";
import { SomePixiExtension } from "some-pixi-extension";

const ExtensionExample = () => (
  <Application extensions={[SomePixiExtension]}>
    {/* Extensions are loaded before initialization */}
    <pixiContainer />
  </Application>
);

import { Application } from "@pixi/react";
import { TextStyle } from "pixi.js";

const defaultStyle = new TextStyle({
  fontFamily: "Arial",
  fontSize: 16,
  fill: "white",
});

const StyledExample = () => (
  <Application defaultTextStyle={defaultStyle}>
    <pixiText text="Uses default style" />
    <pixiText 
      text="Custom style" 
      style={{ fontSize: 24, fill: "red" }} 
    />
  </Application>
);