https://github.com/exodusmovement/use-hot-key
React hook to trigger a callback on keyboard events.
https://github.com/exodusmovement/use-hot-key
Last synced: about 1 year ago
JSON representation
React hook to trigger a callback on keyboard events.
- Host: GitHub
- URL: https://github.com/exodusmovement/use-hot-key
- Owner: ExodusMovement
- License: mit
- Created: 2020-12-02T21:26:32.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2020-12-03T02:28:21.000Z (over 5 years ago)
- Last Synced: 2025-02-15T00:42:09.693Z (over 1 year ago)
- Language: JavaScript
- Size: 12.7 KB
- Stars: 0
- Watchers: 25
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `use-hot-key`
`useHotKey` is a React hook which binds a hotkey combo to a callback for as long as the rendering component remains mounted. The hook automatically clears & rebinds the callback if the modifiers, key, or callback changes.
## Examples
To avoid constant rebinding, make sure to use [`useCallback`](https://reactjs.org/docs/hooks-reference.html#usecallback) to create your callbacks.
Basic usage:
```js
const sayHello = useCallback(() => console.log('hi!'), [])
useHotKey('shift+ctrl', 'h', sayHello)
```
Caps and spaces in the modifiers and key strings don't matter:
```js
const sayHello = useCallback(() => console.log('hi!'), [])
useHotKey('shift + ALT', 'P', sayHello)
```
Can be used without modifier keys
```js
const unfocus = useCallback(() => inputRef.current.blur(), [inputRef])
useHotKey('', 'Escape', unfocus)
```
More than one callback can be bound for the same hotkey at once:
```js
const focusInput = useCallback(() => searchRef.current.focus(), [searchRef])
const blurOtherInput = useCallback(() => otherRef.current.blur(), [otherRef])
useHotKey('ctrl', 'f', focusInput)
useHotKey('ctrl', 'f', blurOtherInput)
```
## Warning
Care should be taken to avoid mounting multiple components (or multiple instances of the same component) at once which attempt to bind the same hotkey to different callbacks. If this happens, all callbacks will fire.