Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jaywcjlove/react-hotkeys
React component to listen to keydown and keyup keyboard events, defining and dispatching keyboard shortcuts.
https://github.com/jaywcjlove/react-hotkeys
hotkeys javascript keyboard react-component reactjs shortcut
Last synced: 18 days ago
JSON representation
React component to listen to keydown and keyup keyboard events, defining and dispatching keyboard shortcuts.
- Host: GitHub
- URL: https://github.com/jaywcjlove/react-hotkeys
- Owner: jaywcjlove
- Created: 2017-08-15T15:08:06.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-12-28T04:32:09.000Z (11 months ago)
- Last Synced: 2024-05-28T14:49:40.049Z (5 months ago)
- Topics: hotkeys, javascript, keyboard, react-component, reactjs, shortcut
- Language: TypeScript
- Homepage: https://jaywcjlove.github.io/react-hotkeys/
- Size: 16 MB
- Stars: 403
- Watchers: 5
- Forks: 22
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
- awesome - jaywcjlove/react-hotkeys - React component to listen to keydown and keyup keyboard events, defining and dispatching keyboard shortcuts. (TypeScript)
README
react-hotkeys
===
[](https://www.npmjs.com/package/react-hot-keys)
[](https://github.com/jaywcjlove/react-hotkeys/actions/workflows/ci.yml)
[](https://www.npmjs.org/package/react-hot-keys) [](https://jaywcjlove.github.io/react-hotkeys/coverage/lcov-report/)
React component to listen to keydown and keyup keyboard events, defining and dispatching keyboard shortcuts. Uses a fork of [hotkeys.js](https://github.com/jaywcjlove/hotkeys) for keydown detection of special characters. You give it a keymap of shortcuts & it bind it to the mousetrap singleton. The, it'll unbind it when the component unmounts.
> [react-hotkeys-hook](https://github.com/JohannesKlauss/react-hotkeys-hook) - React hook for using keyboard shortcuts in components. Make sure that you have at least version 16.8 of react and react-dom installed, or otherwise hooks won't work for you.
## Example
### Install
```sh
npm i -S react-hot-keys
```
### Demo
Preview [demo](https://jaywcjlove.github.io/react-hotkeys/).
- [Codepen example](https://codepen.io/jaywcjlove/pen/bJxbwG?editors=0010).
- [CodesandBox Example](https://codesandbox.io/s/hotkeys-116-8rge8)
```js
import React from 'react';
import Hotkeys from 'react-hot-keys';
export default class HotkeysDemo extends React.Component {
constructor(props) {
super(props);
this.state = {
output: 'Hello, I am a component that listens to keydown and keyup of a',
}
}
onKeyUp(keyName, e, handle) {
console.log("test:onKeyUp", e, handle)
this.setState({
output: `onKeyUp ${keyName}`,
});
}
onKeyDown(keyName, e, handle) {
console.log("test:onKeyDown", keyName, e, handle)
this.setState({
output: `onKeyDown ${keyName}`,
});
}
render() {
return (
{this.state.output}
)
}
}
```
## API
### keyName
Supported keys `⇧`, `shift`, `option`, `⌥`, `alt`, `ctrl`, `control`, `command`, `⌘` .
`⌘` Command()
`⌃` Control
`⌥` Option(alt)
`⇧` Shift
`⇪` Caps Lock
~~`fn` Function key is `fn` (not supported)~~
`↩︎` return/enter
`space` space keys
### onKeyDown
Callback function to be called when user pressed the target buttons
`space` space keys
### onKeyUp
Callback function to be called when user key uped the target buttons
### allowRepeat
> allowRepeat?: boolean;
`allowRepeat` to allow auto repeating key down
### disabled
> disabled?: boolean;
Disable `onKeyDown` and `onKeyUp` events. Default: `undefined`
### filter
`INPUT` `SELECT` `TEXTAREA` default does not handle. `filter` to return to the true shortcut keys set to play a role, flase shortcut keys set up failure.
```diff
{
+ return true;
+ }}
onKeyDown={this.onKeyDown.bind(this)}
onKeyUp={this.onKeyUp.bind(this)}
/>
```
## Contributors
As always, thanks to our amazing contributors!
Made with [action-contributors](https://github.com/jaywcjlove/github-action-contributors).
## License
Licensed under the MIT License.