react-use-hotkeys
React hook for creating simple keyboard shortcuts.

Installation
npm install @reecelucas/react-use-hotkeys
This package has a single dependency, a tiny shim called shim-keyboard-event-key
that normalises the non-standard KeyBoardEvent.key
values implemented in Edge and IE.
Example Usage
All hotkey combinations must use valid KeyBoardEvent
"key"
values. A full list can be found on MDN and Wes Bos has created a great interactive lookup.
useHotkeys('Escape', () => {
console.log('some action');
});
useHotkeys('F7', () => {
console.log('some action');
});
useHotkeys('Meta+Shift+z', () => {
console.log('some action');
});
useHotkeys('w s d', () => {
console.log('some action');
});
useHotkeys('w " " d', () => {
console.log('some action');
});
The following patterns are not supported (yet):
useHotkeys('Control i d', () => {
console.log("I won't run!");
});
useHotkeys('Control+z i d', () => {
console.log("I won't run!");
});
useHotkeys(['Control+z', 'Meta+z'], () => {
console.log("I won't run!");
});
If you find a use case where the API is too restrictive you can use the escape hatch to perform whatever custom logic you need:
useHotkeys('*', event => {
console.log("I will run on every keydown");
if (customKeyLogic(event)) {
console.log("some action");
}
});
Call Signature
useHotkeys(hotkeys: string, callback: (event: KeyboardEvent) => void);
Tests
Tests use Jest and react-testing-library.
git clone git@github.com:reecelucas/react-use-hotkeys.git
cd react-use-hotkeys
yarn
yarn test
LICENSE
MIT