React

Use @interfaces-technology/play-u1/react when you build with React 18+ (optional peerDependency).

The Gamepad API exists only in the browser. Import these hooks from client components—add "use client" at the top of any module that uses useGamepadManager, useGamepads, or useGamepadSnapshot.

Next.js: never call hooks from a Server Component. Keep gamepad code in a client leaf or layout.

useGamepadManager(options?)

Returns a stable GamepadManager for the component lifetime:

• manager.start() on mount; manager.stop() on unmount.
• When options.deadzone changes in a JSON-stable way, manager.setDeadzone runs for you.

"use client";
 
import { useGamepadManager } from "@interfaces-technology/play-u1/react";
import { useEffect } from "react";
 
export function GamepadRoot() {
  const manager = useGamepadManager({ deadzone: 0.12 });
 
  useEffect(() => {
    return manager.onConnect((pad) => {
      pad.onPress("A", () => console.log("A"));
    });
  }, [manager]);
 
  return null;
}

useGamepads(options?)

Returns { manager, devices } where devices is the current GamepadDevice[], updated via useSyncExternalStore when pads connect or disconnect. Same manager behavior as useGamepadManager under the hood.

"use client";
 
import { useGamepads } from "@interfaces-technology/play-u1/react";
 
export function PadList() {
  const { devices } = useGamepads({ deadzone: 0.12 });
  return (
    <ul>
      {devices.map((d) => (
        <li key={d.index}>{d.id}</li>
      ))}
    </ul>
  );
}

useGamepadSnapshot(pad)

Reactive GamepadSnapshot | null for one device (null when pad is missing). Updates align with pad.onChange—good for HUDs bound to sticks and triggers.

Pair useGamepads with useGamepadSnapshot to render live state without hand-rolled subscriptions.

See also: Quick start · Input events · API reference