@seesaw/react-hot-keys

react-hotkeys
---

[![Travis][build-badge]][build] [![npm package][npm-badge]][npm] [![Coveralls][coveralls-badge]][coveralls]

[build-badge]: https://travis-ci.org/jaywcjlove/react-hotkeys.svg?branch=master "Build Badge"
[build]: https://travis-ci.org/jaywcjlove/react-hotkeys "Build"

[npm-badge]: https://img.shields.io/npm/v/react-hot-keys.svg "Npm Badge"
[npm]: https://www.npmjs.org/package/react-hot-keys "npm"

[coveralls-badge]: https://img.shields.io/coveralls/jaywcjlove/react-hotkeys/master.svg "Coveralls Badge"
[coveralls]: https://coveralls.io/github/jaywcjlove/react-hotkeys "Coveralls"

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.

Example

$3

``sh
sudo 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)}
/>
``

License

MIT