`<Application/>`

The <Application /> is the root your PlayCanvas React application. It initializes the engine and provides a rendering context. An Application maps to a single canvas in your app.

You can set the fill mode and resolution mode to control how the canvas fills the window, and other properties that control the graphics device.

import { Application } from '@playcanvas/react'

export default function Scene() {
  return (
    <Application 
      fillMode={FILLMODE_FILL_WINDOW}
      resolutionMode={RESOLUTION_AUTO}
    >
      {/* Your scene content */}
    </Application>
  )
}

Properties

Name	Type	Default
`fillMode?`	`"NONE" \| "FILL_WINDOW" \| "KEEP_ASPECT"` Controls how the canvas fills the window and resizes when the window changes.	`FILLMODE_NONE`
`resolutionMode?`	`"AUTO" \| "FIXED"` Change the resolution of the canvas, and set the way it behaves when the window is resized.	`RESOLUTION_AUTO`
`usePhysics?`	`boolean` When `true`, the PlayCanvas Physics system will be enabled.	`false`
`deviceTypes?`	`DeviceType[]` The device types to use for the graphics device. This allows you to set an order of preference for the graphics device. The first device type in the array that is supported by the browser will be used.	`[DEVICETYPE_WEBGL2]`
`graphicsDeviceOptions?`	`GraphicsDeviceOptions` Graphics Settings	`-`
`children?`	`ReactNode` The children of the application	`-`
`timeScale?`	`number` Scales the global time delta. Defaults to 1.	`-`
`maxDeltaTime?`	`number` Clamps per-frame delta time to an upper bound. Useful since returning from a tab deactivation can generate huge values for dt, which can adversely affect game state. Defaults to 0.1 (seconds).	`-`
`scriptsOrder?`	`string[]` Scripts in order of loading first.	`-`
`autoRender?`	`boolean` When true, the application's render function is called every frame. Setting autoRender to false is useful to applications where the rendered image may often be unchanged over time. This can heavily reduce the application's load on the CPU and GPU. Defaults to true.	`-`
`renderNextFrame?`	`boolean` Set to true to render the scene on the next iteration of the main loop. This only has an effect if autoRender is set to false. The value of renderNextFrame is set back to false again as soon as the scene has been rendered.	`-`
`graphicsDevice?`	`GraphicsDevice` The graphics device used by the application.	`-`
`root?`	`Entity` The root entity of the application.	`-`
`scene?`	`Scene` The scene managed by the application.	`-`
`lightmapper?`	`Lightmapper \| null` The run-time lightmapper.	`-`
`loader?`	`ResourceLoader` The resource loader.	`-`
`assets?`	`AssetRegistry` The asset registry managed by the application.	`-`
`scenes?`	`SceneRegistry` The scene registry managed by the application.	`-`
`scripts?`	`ScriptRegistry` The application's script registry.	`-`
`systems?`	`ComponentSystemRegistry` The application's component system registry.	`-`
`i18n?`	`I18n` Handles localization.	`-`
`keyboard?`	`Keyboard \| null` The keyboard device.	`-`
`mouse?`	`Mouse \| null` The mouse device.	`-`
`touch?`	`TouchDevice \| null` Used to get touch events input.	`-`
`gamepads?`	`GamePads \| null` Used to access GamePad input.	`-`
`elementInput?`	`ElementInput \| null` Used to handle input for ElementComponents.	`-`
`xr?`	`XrManager \| null` The XR Manager that provides ability to start VR/AR sessions.	`-`
`defaultLayerWorld?`	`Layer`	`-`
`defaultLayerDepth?`	`Layer`	`-`
`defaultLayerSkybox?`	`Layer`	`-`
`defaultLayerUi?`	`Layer`	`-`
`defaultLayerImmediate?`	`Layer`	`-`
`controller?`	`any`	`-`
`context?`	`any`	`-`
`className?`	`string` The class name to attach to the canvas component	`pc-app`
`style?`	`Record<string, unknown>` A style object added to the canvas component	`{ width: '100%', height: '100%' }`

Properties​

Properties