A tiny (1Kb) set of React hotkeys utilities to make great user experience 🚀. Build on top of tinykeys
Features:
- [x] Global hotkeys
- [x] Element specific hotkeys
- [x] Modifiers support
- [x] Sequence hotkeys
- [x] Disabled on input elements by default
- [x] TypeScript support
- [x] 100% test coverage
- [x] Pure ESM build. See
yarn add @shelf/hotkeys reactimport {Hotkey} from '@shelf/hotkeys';
function Demo() {
return (
<Hotkey
binding={'$mod+a'}
onAction={() => {
// Do some amazing stuff 🚀
}}
/>
);
}binding
See tinykeys for more info
onAction
Function to be called when hotkey is pressed. Accept Keyboard event as first argument.
options.disableOnInputs
Disable hotkey when input/textarea element is focused. Default: true
Examples:
<Hotkey binding={'a'} onAction={}/> // single key case insensitive
<Hotkey binding={'1'} onAction={}/> // number keys
<Hotkey binding={'Escape'} onAction={}/>
<Hotkey binding={'Enter'} onAction={}/>
// ⌘ + a on macOS, Ctrl + a on Windows and Linux
<Hotkey binding={'$mod+a'} onAction={}/>
// sequence hotkey support by empty space
<Hotkey binding={'g i'} onAction={}/>
// combination of keys, make sure no spaces between keys
<Hotkey binding={'Control+a'} onAction={}/>
// $mod is a special key for ⌘ on macOS and Ctrl on Windows and Linux
<Hotkey binding={'$mod+a'} onAction={}/>
// Prevent default browser action opening new tab
<Hotkey binding={'$mod+T'} onAction={event => {
event.preventDefault();
}}/>
// Enable hotkey when input/textarea element is focused
<Hotkey
binding={'a'}
onAction={}
options={{
disableOnInputs: false,
event: 'keyup' // default is keydown
}}
/>useHotkeys(keymap, [options], [element]) is a hook that allows you to register multiple hotkeys at once.
import {useHotkeys} from '@shelf/hotkeys';
function Demo() {
useHotkeys(
{
'$mod+a': () => {},
'g i': () => {},
// Do some amazing stuff 🚀
},
{
disableOnInputs: false,
}
);
return <div>...</div>;
}$ git checkout master
$ yarn version
$ yarn publish
$ git push origin master --tagsMIT © Shelf