useGamepadEvents
useGamepadEvents is a tiny, SSR-friendly hook for listening to gamepad events. It's a wrapper around the Gamepad API designed for firing events in response to gamepad button presses, as opposed to polling for button states. It's designed to be used with React and exposes an event emitter interface.
Installation
yarn add @haydenbleasel/use-gamepad-events
Usage
Here's a simple example of how to use useGamepadEvents to listen for 'a' button presses:
import { useGamepadEvents } from '@haydenbleasel/use-gamepad-events';
const App = () => {
const gamepadEvents = useGamepadEvents({
onConnect: (gamepad) => console.log(`Gamepad ${gamepad.id} connected`),
onDisconnect: () => console.log('Gamepad disconnected'),
onReady: () => console.log('Gamepad ready'),
});
gamepadEvents.on('a', () => {
console.log('A button pressed');
});
return <p>Hello, world.</p>;
};
Here's a more complex example that uses multiple gamepad event emitters to control the window.
const useGamepadNavigation = (): void => {
const { open } = useCommandBar();
const gamepadEvents = useGamepadEvents({
onReady: (gamepad) => {
window.alert(
`${gamepad.id} connected. Press START to reload the page, SELECT to go back and use the D-Pad to navigate.`
);
},
});
gamepadEvents.on('options', window.reload);
gamepadEvents.on('share', window.back);
gamepadEvents.on('down', () => {
if (typeof window === 'undefined' || open) {
return;
}
window.scrollTo({ top: window.scrollY + window.innerHeight });
});
gamepadEvents.on('up', () => {
if (typeof window === 'undefined' || open) {
return;
}
window.scrollTo({ top: window.scrollY - window.innerHeight });
});
};
Known issues
Currently due to the amount of re-renders, it's difficult to capture a sequence of events e.g.
const gamepadEvents = useGamepadEvents();
const [sequence, setSequence] = useState<string[]>([]);
buttons.forEach((button) => {
gamepadEvents.on(button, () => {
setSequence([...sequence, button]);
});
});
console.log(sequence);
The sequence array is updated, but the re-renders cause the array to be reset to an empty array.
Really want to get this working to make it easier to capture something like a Konami code.
If you can think of a way to solve this, please let me know!
4 May 3, 2022
14 Jan 3, 2023
5 Dec 28, 2022
5.8k Jan 5, 2023
79 Nov 18, 2022
47 Jan 1, 2023
221 Dec 25, 2022
19.6k Jan 8, 2023
13 Dec 22, 2022
8 Dec 21, 2022
7 Sep 23, 2022
23 Dec 18, 2022
2 Sep 26, 2022
9 Nov 19, 2022
14 Dec 17, 2022
8 Dec 19, 2022
7 Dec 4, 2022
11 Nov 27, 2022
13 Apr 22, 2022