CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-pixi--react

React integration for PixiJS enabling declarative 2D graphics programming with JSX and React patterns.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

@pixi/react

@pixi/react is a React integration library for PixiJS that enables declarative 2D graphics programming using JSX. It bridges React's component-based architecture with PixiJS's high-performance 2D graphics rendering, providing hooks, components, and a type-safe API for building interactive graphics applications.

Package Information

  • Package Name: @pixi/react
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install pixi.js@^8.2.6 @pixi/react

Core Imports

import { Application, createRoot, extend } from "@pixi/react";
import { useApplication, useTick, useExtend } from "@pixi/react";

For CommonJS:

const { Application, createRoot, extend, useApplication, useTick, useExtend } = require("@pixi/react");

Type imports:

import type { ApplicationRef, PixiElements, PixiReactElementProps, UnprefixedPixiElements } from "@pixi/react";

Basic Usage

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

// Register PixiJS components for JSX usage
extend({ Container, Graphics });

const MyComponent = () => {
  const drawCallback = useCallback((graphics) => {
    graphics.clear();
    graphics.setFillStyle({ color: "red" });
    graphics.rect(0, 0, 100, 100);
    graphics.fill();
  }, []);

  return (
    <Application>
      <pixiContainer x={100} y={100}>
        <pixiGraphics draw={drawCallback} />
      </pixiContainer>
    </Application>
  );
};

Architecture

@pixi/react is built around several key components:

  • Component Extension System: The extend() function registers PixiJS classes for JSX usage, enabling selective imports
  • React Integration: Full React lifecycle support with context, refs, and hooks
  • Reconciler: Custom React reconciler manages PixiJS display objects as React components
  • Type System: Complete TypeScript integration with type-safe JSX elements for all PixiJS components
  • Hook System: React hooks for accessing application state, ticker integration, and dynamic component registration

Capabilities

Application Component

Root component that creates and manages a PixiJS Application with React lifecycle integration. Handles canvas creation, application initialization, and context provision.

interface ApplicationProps extends BaseApplicationProps, Partial<ApplicationOptions> {
  className?: string;
  children?: PixiReactChildNode;
  defaultTextStyle?: TextStyle | TextStyleOptions;
  extensions?: (ExtensionFormatLoose | any)[];
  onInit?: (app: Application) => void;
  resizeTo?: HTMLElement | Window | RefObject<HTMLElement | null>;
}

const Application: React.ForwardRefExoticComponent<ApplicationProps & React.RefAttributes<ApplicationRef>>;

Application Component

Root Creation

Imperative API for creating PixiJS React roots, useful for custom integration scenarios and programmatic application management.

function createRoot(
  target: HTMLElement | HTMLCanvasElement,
  options?: CreateRootOptions
): Root;

interface CreateRootOptions {
  onInit?: (app: PixiApplication) => void;
}

interface Root {
  render(children: ReactNode, applicationOptions: ApplicationOptions): Promise<PixiApplication>;
}

Root Creation

Component Extension

System for registering PixiJS components for JSX usage, enabling selective imports and bundle size optimization.

function extend(objects: { [key: string]: new (...args: any) => any }): void;

Component Extension

React Hooks

Collection of hooks for accessing PixiJS application state, integrating with the ticker system, and dynamically extending components.

function useApplication(): ApplicationState;
function useTick<T>(options: TickerCallback<T> | UseTickOptions<T>): void;
function useExtend(objects: Parameters<typeof extend>[0]): void;

React Hooks

JSX Elements

Type-safe JSX elements for all PixiJS components, supporting both prefixed (pixiContainer) and unprefixed (container) usage patterns.

interface PixiElements extends PrefixedPixiElements {}

type PixiReactElementProps<T extends new (...args: any) => any> =
  BaseNodeProps<InstanceType<T>>
  & GraphicsProps<InstanceType<T>>
  & EventHandlers
  & ConstructorOptions<T>;

JSX Elements

Types

interface ApplicationRef {
  getApplication(): PixiApplication | null;
  getCanvas(): HTMLCanvasElement | null;
}

interface ApplicationState {
  app: PixiApplication;
  isInitialised: boolean;
  isInitialising: boolean;
}

interface UseTickOptions<T> {
  callback: TickerCallback<T>;
  context?: T;
  isEnabled?: boolean;
  priority?: number;
}

type PixiReactChildNode = BasePixiReactNode | Iterable<BasePixiReactNode> | ReactNode;

Install with Tessl CLI

npx tessl i tessl/npm-pixi--react
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@pixi/react@8.0.x
Publish Source
CLI
Badge
tessl/npm-pixi--react badge