useXR Hook

The useXR hook allows to retrieve the current XR state, including the mode (immersive-vr, immersive-ar, inline, or none), the session, the inputSources, the active layers, the trackedImages, and the trackedPlanes.

The hook allows developers to listen to any of these values using useXR(state => state.{property}). When only the current value is required, useXR.getState().{property} can be used.

For instance, if you have a cube that should only rotate in AR mode, you can use useXR.getState().mode to determine the current mode inside a useFrame hook.

const ref = useRef<Mesh>(null);
useFrame((_, delta) => {
  const isAR = useXR.getState().mode === "immersive-ar";
  if (!isAR || ref.current == null) {
    return;
  }
  ref.current.object.rotation.y += delta * 0.1;
});
return (
  <mesh ref={ref}>
    <boxGeometry />
  </mesh>
);

Exiting a XR Session

The useXR hook can be used to exit the current XR session by retrieving the current state with the current session and then calling end on the current session.

useXR.getState().session?.end().catch(console.error)

---

Question not answered?

If your questions were not yet answered, visit our Discord 😉