r3f-xr-widgets / useXRButtons

Function: useXRButtons()

useXRButtons(options): UseXRButtonsReturn

Defined in: src/hooks/useXRButtons.ts:121

Hook for monitoring XR controller button presses and thumbstick gestures

Monitors both left and right XR controllers simultaneously and triggers callbacks when buttons are pressed or thumbsticks are moved past threshold. All callbacks are edge-triggered (fire once per button press, not continuously while held).

Features:

• Monitors A, B, X, Y buttons from either controller
• Thumbstick gestures (up/down/left/right) with 0.7 threshold
• Optional pointer-on-target gating for selective activation
• Edge-triggered callbacks (fires once per press/gesture)
• Returns targetRef and pointer handlers for easy integration

Parameters

options

UseXRButtonsOptions = {}

Configuration with button/thumbstick callbacks and pointer requirements

Returns

UseXRButtonsReturn

Object with targetRef and pointer event handlers to attach to your mesh

Examples

import { useXRButtons } from 'r3f-xr-widgets'

function InteractiveMesh() {
  const { targetRef, onPointerEnter, onPointerLeave } = useXRButtons({
    onAPress: () => console.log('A pressed'),
    onBPress: () => console.log('B pressed'),
    onThumbstickUp: () => console.log('Thumbstick up')
  })

  return (
    <mesh
      ref={targetRef}
      onPointerEnter={onPointerEnter}
      onPointerLeave={onPointerLeave}
    >
      <boxGeometry />
      <meshStandardMaterial />
    </mesh>
  )
}

const { targetRef } = useXRButtons({
  onAPress: handlePlay,
  requirePointerOn: false // Trigger even when not pointing at target
})