498

useGamepad

PreviousNext

Hook for getting information about gamepad

browserlowtest coverage

Api not supported, make sure to check for compatibility with different browsers when using this api

import { useGamepad } from '@siberiacancode/reactuse';

const Demo = () => {
  const { supported, gamepads } = useGamepad();

  if (!supported)
    return (
      <p>
        Api not supported, make sure to check for compatibility with different browsers when using
        this{' '}
        <a
          href='https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getGamepads'
          rel='noreferrer'
          target='_blank'
        >
          api
        </a>
      </p>
    );

  return (
    <>
      <p>Gamepads</p>
      {!gamepads.length && <code>no gamepads connected</code>}
      {!!gamepads.length && (
        <>
          {gamepads.map((gamepad) => (
            <div key={gamepad.id}>
              <p>
                id: <code>{gamepad.id}</code>
              </p>
              <p>
                index: <code>{gamepad.index}</code>
              </p>
            </div>
          ))}
        </>
      )}
    </>
  );
};

export default Demo;
This hook uses navigator.getGamepads browser api to provide enhanced functionality. Make sure to check for compatibility with different browsers when using this api

Installation

pnpm add @siberiacancode/reactuse

Usage

const { supported, gamepads, active } = useGamepad();

Type Declarations

interface Gamepad {
    hapticActuators?: GamepadHapticActuator[];
  }

export interface UseGamepadStateReturn {
  /** The gamepad active status */
  active: boolean;
  /** The gamepad state */
  gamepads: Gamepad[];
  /** The gamepad supported status */
  supported: boolean;
}

API

Returns

UseGamepadStateReturn

Contributors

ddebabin

Last updated on