r3f-xr-widgets / Hover

Function: Hover()

Hover(props): Element

Defined in: src/components/Hover.tsx:68

XR hover interaction component with optional haptic feedback

Wraps content in a group and provides hover state through a render prop pattern. Automatically triggers haptic feedback on XR controllers when hovering begins.

Parameters

props

HoverProps

Returns

Element

Examples

<Hover pulse={{ duration: 50, intensity: 0.5 }}>
  {(hovered) => (
    <mesh>
      <boxGeometry />
      <meshStandardMaterial color={hovered ? 'hotpink' : 'white'} />
    </mesh>
  )}
</Hover>

const targetRef = useRef<Object3D>(null)

<group>
  <mesh ref={targetRef}>
    <boxGeometry />
    <meshStandardMaterial />
  </mesh>
  <Hover hoverTargetRef={targetRef}>
    {(hovered) => (
      <Text>{hovered ? 'Hovered!' : 'Not hovered'}</Text>
    )}
  </Hover>
</group>