useGamepad

v0.0.14testeddemo

Reactive wrapper around the Gamepad API. Tracks connected gamepads, emits connection/disconnection events, and polls live button/axis state on every animation frame. The polling loop stays paused while no gamepad is connected and resumes automatically on the first connection, so there is zero idle work. SSR-safe.

Source Tests

Examples

const { gamepads, isSupported, onConnected, onDisconnected } = useGamepad();

onConnected((index) => console.log(`gamepad ${index} connected`));
onDisconnected((index) => console.log(`gamepad ${index} disconnected`));

// Map the first gamepad to an Xbox 360 layout
const { gamepads } = useGamepad();
const gamepad = computed(() => gamepads.value[0]);
const controller = mapGamepadToXbox360Controller(gamepad);

Demo

Loading demo…

Signature

export function useGamepad(options: UseGamepadOptions ={ ... }

Parameters

Parameter	Type	Default	Description
`options`?	`UseGamepadOptions`	`{}`	Configuration options

Returns

UseGamepadReturnReactive gamepad state, lifecycle hooks, and loop controls

Property	Type	Default	Description
`isSupported`	`ComputedRef<boolean>`	—	Whether the Gamepad API is supported in the current environment
`gamepads`	`Ref<Gamepad[]>`	—	The list of currently connected gamepads, kept in sync each animation frame
`onConnected`	`GamepadEventHookOn`	—	Subscribe to gamepad connection. The listener receives the gamepad index.
`onDisconnected`	`GamepadEventHookOn`	—	Subscribe to gamepad disconnection. The listener receives the gamepad index.
`isActive`	`Readonly<Ref<boolean>>`	—	Whether the polling loop is currently active