useParent

The useParent hook provides access to the parent Entity from within your React components. It's essential for components that need to interact with their parent entity.

Basic Usage

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

function MyComponent() {
  const parent = useParent()
  
  // Access parent entity properties
  console.log('Parent name:', parent.name)
  console.log('Parent position:', parent.position)
  
  return null
}

Returns

Name	Type	Default
parent	Entity The PlayCanvas Entity instance	-

Requirements

This hook must be used within an <Entity> component. If used outside of this context, it will throw an error.

// ✅ Correct usage
<Entity>
  <MyComponent /> {/* useParent works here */}
</Entity>

// ❌ Incorrect usage
<MyComponent /> {/* useParent will throw an error */}

Examples

Accessing Entity Properties

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

function EntityInfo() {
  const parent = useParent()
  
  return (
    <div>
      <p>Entity Name: {parent.name}</p>
      <p>Position: {parent.position.toString()}</p>
      <p>Rotation: {parent.rotation.toString()}</p>
      <p>Scale: {parent.scale.toString()}</p>
    </div>
  )
}

Related

• Entity Component - The component that provides the entity context
• useApp - Access the Application instance
• Entity API - PlayCanvas Entity documentation