React hook for providing info from gamepads connected to the system
MIT License
@rehooks/gamepads
React hook for providing both read and write access to the system gamepads.
Note: This is using the new React Hooks API Proposal which is subject to change until React 16.7 final. This also uses the Gamepads API which is also experimental; it is a relatively recent addition, and the process of implementing it in browsers is not yet complete.
You'll need to install
react
,react-dom
, etc at^16.7.0-alpha.0
yarn add @rehooks/gamepads
import useGamepads from "@rehooks/gamepads";
function Gamepad(props) {
const { gamepad, index } = props;
return gamepad ? (
<div key={index}>
<h1>
{index + 1}: {gamepad.id}
</h1>
</div>
) : (
<div key={index}>
<h1>{index + 1}: None</h1>
</div>
);
}
function App() {
const gamepads = useGamepads(true);
return (
gamepads && (
<div>
{gamepads.map((item, index) => (
<Gamepad gamepad={item} index={index} />
))}
</div>
)
);
}
The useGamepads(shouldPoll)
hook takes one parameter and returns an array of Gamepad objects. The mentioned parameter is:
shouldPoll
Should be used in order to get new data constantly. Since there's no DOM event for listening to
button presses or similar, it relies on requestAnimationFrame
instead of plain setInterval
.
Note that in a large application, running a digest
60
times a second would not be great.