https://github.com/shelfio/hotkeys
Declarative React component to deal with hotkeys
https://github.com/shelfio/hotkeys
Last synced: 2 months ago
JSON representation
Declarative React component to deal with hotkeys
- Host: GitHub
- URL: https://github.com/shelfio/hotkeys
- Owner: shelfio
- License: mit
- Created: 2024-03-01T05:32:32.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2025-06-07T01:09:58.000Z (7 months ago)
- Last Synced: 2025-06-07T02:26:10.003Z (7 months ago)
- Language: TypeScript
- Size: 107 KB
- Stars: 0
- Watchers: 10
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: license
Awesome Lists containing this project
README
# @shelf/hotkeys
> A tiny (1Kb) set of React hotkeys utilities to make great user experience 🚀.
> Build on top of [tinykeys](https://github.com/jamiebuilds/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](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c)
## Installation
```sh
yarn add @shelf/hotkeys react
```
## Usage
```tsx
import {Hotkey} from '@shelf/hotkeys';
function Demo() {
return (
{
// Do some amazing stuff 🚀
}}
/>
);
}
```
### Hotkey
`binding`
See [tinykeys](https://github.com/jamiebuilds/tinykeys/blob/main/README.md#commonly-used-keys-and-codes) 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
```
### useHotkeys
`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](https://shelf.io)