Repository files navigation

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

Previewdemo.

• Codepen example.
• CodesandBox Example

importReactfrom'react';importHotkeysfrom'react-hot-keys';exportdefaultclassHotkeysDemoextendsReact.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(<HotkeyskeyName="shift+a,alt+s"onKeyDown={this.onKeyDown.bind(this)}onKeyUp={this.onKeyUp.bind(this)}><divstyle={{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 isfn (not supported)
↩︎ return/enterspace space keys

Callback function to be called when user pressed the target buttonsspace 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;

DisableonKeyDown andonKeyUp events. Default:undefined

INPUTSELECTTEXTAREA 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)} />

As always, thanks to our amazing contributors!

Made withaction-contributors.

Licensed under the MIT License.