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.
npm i -S react-hot-keysPreview demo.
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 (
<Hotkeys
keyName="shift+a,alt+s"
onKeyDown={this.onKeyDown.bind(this)}
onKeyUp={this.onKeyUp.bind(this)}
>
<div style={{ padding: "50px" }}>
{this.state.output}
</div>
</Hotkeys>
)
}
}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
Callback function to be called when user pressed the target buttons
space space keys
Callback function to be called when user key uped the target buttons
allowRepeat?: boolean;
allowRepeat to allow auto repeating key down
disabled?: boolean;
Disable onKeyDown and onKeyUp events. Default: undefined
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.
<Hotkeys
keyName="shift+a,alt+s"
+ filter={(event) => {
+ return true;
+ }}
onKeyDown={this.onKeyDown.bind(this)}
onKeyUp={this.onKeyUp.bind(this)}
/>MIT