0
# Application Component
1

2
The Application component is the root component for @pixi/react applications. It creates and manages a PixiJS Application instance, handles canvas setup, and provides React context for child components.
3

4
## Capabilities
5

6
### Application Component
7

8
Root component that creates and manages a PixiJS Application with React lifecycle integration.
9

10
```typescript { .api }
11
/**
12
 * Root component that creates and manages a PixiJS Application
13
 * @param props - Application configuration and React props
14
 * @param ref - React ref providing access to application and canvas
15
 */
16
const Application: React.ForwardRefExoticComponent<ApplicationProps & React.RefAttributes<ApplicationRef>>;
17

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

33
interface ApplicationRef {
34
  /** Get the PixiJS Application instance */
35
  getApplication(): PixiApplication | null;
36
  /** Get the canvas element */
37
  getCanvas(): HTMLCanvasElement | null;
38
}
39
```
40

41
**Usage Examples:**
42

43
```typescript
44
import { Application, extend } from "@pixi/react";
45
import { Container, Text } from "pixi.js";
46
import { useRef } from "react";
47

48
extend({ Container, Text });
49

50
// Basic usage
51
const BasicExample = () => (
52
  <Application width={800} height={600}>
53
    <pixiContainer>
54
      <pixiText text="Hello World!" x={100} y={100} />
55
    </pixiContainer>
56
  </Application>
57
);
58

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

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

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

75
  return (
76
    <Application
77
      ref={appRef}
78
      width={1024}
79
      height={768}
80
      backgroundColor="0x1099bb"
81
      onInit={handleInit}
82
    >
83
      <pixiContainer>
84
        <pixiText text="Click to log app info" interactive onPointerTap={getAppInfo} />
85
      </pixiContainer>
86
    </Application>
87
  );
88
};
89

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

94
  return (
95
    <div ref={containerRef} style={{ width: "100%", height: "400px" }}>
96
      <Application
97
        resizeTo={containerRef}
98
        className="pixi-canvas"
99
        antialias={true}
100
        resolution={window.devicePixelRatio || 1}
101
      >
102
        <pixiContainer>
103
          <pixiText text="Responsive Canvas" anchor={0.5} x={400} y={200} />
104
        </pixiContainer>
105
      </Application>
106
    </div>
107
  );
108
};
109
```
110

111
### Application Properties
112

113
All PixiJS ApplicationOptions are supported as props:
114

115
```typescript { .api }
116
interface ApplicationOptions {
117
  width?: number;
118
  height?: number;
119
  backgroundColor?: ColorSource;
120
  backgroundAlpha?: number;
121
  antialias?: boolean;
122
  resolution?: number;
123
  autoDensity?: boolean;
124
  powerPreference?: WebGLPowerPreference;
125
  premultipliedAlpha?: boolean;
126
  preserveDrawingBuffer?: boolean;
127
  clearBeforeRender?: boolean;
128
  hello?: boolean;
129
}
130
```
131

132
### Extension Management
133

134
The Application component automatically manages PixiJS extensions:
135

136
```typescript
137
import { Application } from "@pixi/react";
138
import { ParticleContainer } from "pixi.js";
139
import { SomePixiExtension } from "some-pixi-extension";
140

141
const ExtensionExample = () => (
142
  <Application extensions={[SomePixiExtension]}>
143
    {/* Extensions are loaded before initialization */}
144
    <pixiContainer />
145
  </Application>
146
);
147
```
148

149
### Default Text Styling
150

151
Configure default text styles for the entire application:
152

153
```typescript
154
import { Application } from "@pixi/react";
155
import { TextStyle } from "pixi.js";
156

157
const defaultStyle = new TextStyle({
158
  fontFamily: "Arial",
159
  fontSize: 16,
160
  fill: "white",
161
});
162

163
const StyledExample = () => (
164
  <Application defaultTextStyle={defaultStyle}>
165
    <pixiText text="Uses default style" />
166
    <pixiText 
167
      text="Custom style" 
168
      style={{ fontSize: 24, fill: "red" }} 
169
    />
170
  </Application>
171
);
172
```
173

174
## Error Handling
175

176
The Application component includes error boundaries and validation:
177

178
- Throws if used outside a proper React context
179
- Validates canvas creation and PixiJS initialization
180
- Provides meaningful error messages for common configuration issues
181
- Handles cleanup during component unmounting