@shelf/hotkeys

> 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

Installation

``sh
yarn add @shelf/hotkeys react
`

Usage

`tsx
import {Hotkey} from '@shelf/hotkeys';

function Demo() {
return (
binding={'$mod+a'}
onAction={() => {
// Do some amazing stuff 🚀
}}
/>
);
}
`

$3

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:

`tsx
// single key case insensitive
// number keys



// ⌘ + a on macOS, Ctrl + a on Windows and Linux


// sequence hotkey support by empty space


// combination of keys, make sure no spaces between keys


// $mod is a special key for ⌘ on macOS and Ctrl on Windows and Linux



// Prevent default browser action opening new tab
{
event.preventDefault();
}}/>


// Enable hotkey when input/textarea element is focused
binding={'a'}
onAction={}
options={{
disableOnInputs: false,
event: 'keyup' // default is keydown
}}
/>
`

$3

useHotkeys(keymap, [options], [element]) is a hook that allows you to register multiple hotkeys at once.

`tsx
import {useHotkeys} from '@shelf/hotkeys';

function Demo() {
useHotkeys(
{
'$mod+a': () => {},
'g i': () => {},
// Do some amazing stuff 🚀
},
{
disableOnInputs: false,
}
);

return

;
}
`

Publish

`sh
$ git checkout master
$ yarn version
$ yarn publish
$ git push origin master --tags
``

License

MIT © Shelf