react-ctrls

React hooks to easily implement gamepad controls using the Gamepad API. Supports the use of multiple gamepads at the same time across multiple browsers. Removes the common need for context or prop drilling to read gamepad inputs.

Installation

npm install react-ctrls

Hooks

• useGamepadEvents
• useButtonChange
• useButtonDown
• useButtonUp
• useAxisChange

Potential future hooks

• usePose
• useMultipress
• useInputSequence

Example

App.js

import useGamepadEvents from 'react-ctrls/useGamepadEvents';

const App = () => {
  useGamepadEvents();
  return <MyComponent />;
};

MyComponent.js

import useButtonDown from 'react-ctrls/useButtonDown';

const MyComponent = () => {
  useButtonDown((data) => {
    console.log(data);
  });

  return <div>Logging button presses</div>;
};