react-hot-keys

react-hotkeys
===

 

React component to listen to keydown and keyup keyboard events, defining and dispatching keyboard shortcuts. Uses a fork of hotkeys.js 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 - 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

$3

``sh
npm i -S react-hot-keys
`

$3

Preview demo.

- Codepen example.
- CodesandBox Example

`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 (
keyName="shift+a,alt+s"
onKeyDown={this.onKeyDown.bind(this)}
onKeyUp={this.onKeyUp.bind(this)}
>




)
}
}
`

API

$3

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

$3

Callback function to be called when user pressed the target buttons
space space keys

$3

Callback function to be called when user key uped the target buttons

$3

> allowRepeat?: boolean;

allowRepeat to allow auto repeating key down




$3

> disabled?: boolean;

Disable onKeyDown and onKeyUp events. Default: undefined

$3

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
keyName="shift+a,alt+s"
+ filter={(event) => {
+ return true;
+ }}
onKeyDown={this.onKeyDown.bind(this)}
onKeyUp={this.onKeyUp.bind(this)}
/>
``

Contributors

As always, thanks to our amazing contributors!

Made with action-contributors.

License

Licensed under the MIT License.