A simple mixin for application hotkeys.
Provides a react synthetic event to the named event handler, but only when the component is mounted.
For more info, check out the demo from the example folder.
npm install react-hotkey --save
As of version 0.7.0, React 15.4+ is required. If you're using an older version of react, then you should stick with 0.6.0.
This library relies on React's internals which is not officially supported.
Your build may break unexpectedly even when simply upgrading React to a new minor version.
PRs that solve this problem are welcome, see this issue for more information.
var hotkey = require('react-hotkey');
// Enable event listening, can be safely called multiple times
hotkey.activate();
// The default is to listen for 'keyup' but you can listen to others by passing an argument
hotkey.activate('keydown');
React.createClass({
mixins: [hotkey.Mixin('handleHotkey')],
handleHotkey: function(e) {
// receives a React Keyboard Event
// http://facebook.github.io/react/docs/events.html#keyboard-events
}
})React Mixins do not work with ES2015. Instead one may use the addHandler and removeHandler functions:
import React from 'react';
import hotkey from 'react-hotkey';
hotkey.activate();
class MyComponent extends React.Component {
constructor() {
this.hotkeyHandler = this.handleHotkey.bind(this);
}
handleHotkey(e) {
console.log("hotkey", e);
}
componentDidMount() {
hotkey.addHandler(this.hotkeyHandler);
}
componentWillUnmount() {
hotkey.removeHandler(this.hotkeyHandler);
}
}This approach was extracted from react-bootstrap.
MIT