useApp

The useApp hook provides access to the PlayCanvas Application instance from within your React components. It's a convenient way to get information about the app state, fire events, and more.

./my-component.jsx

import { useApp } from '@playcanvas/react/hooks'

function MyComponent() {
  const app = useApp()
  
  // Access application properties
  console.log('Scene:', app.scene)
  console.log('Camera:', app.scene.camera)
  
  return null
}

A reference to the app gives you access to the scene, camera, systems, etc.

Application context

The hook only relies on the <Application/> component for context, so without one it will throw an error. Call it from inside a component that is a child of an <Application/>.

🚫 No <Application> context

// Nope, useApp is outside <Application>
export const Wrong = () => {
  const app = useApp();
  return (
    <Application>
      <Scene/>
    </Application>
  )
}

✅ Correct <Application> context

// Yep! `useApp` has <Application> context
const Correct = () => {
  const app = useApp();
  return <Scene />;
}

export const App = () => <Application>
  <Correct/>
  </Application>

Properties

Name	Type	Default
app	Application The PlayCanvas Application instance	-

Related

• Application Component - The component that provides the app context
• useParent - Access the parent Entity
• useAppEvent - Subscribe to application events