react-hotkey

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.

Install

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.

Warning

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.

Usage

varhotkey=require('react-hotkey');// Enable event listening, can be safely called multiple timeshotkey.activate();// The default is to listen for 'keyup' but you can listen to others by passing an argumenthotkey.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:

importReactfrom'react';importhotkeyfrom'react-hotkey';hotkey.activate();classMyComponentextendsReact.Component{constructor(){this.hotkeyHandler=this.handleHotkey.bind(this);}handleHotkey(e){console.log("hotkey",e);}componentDidMount(){hotkey.addHandler(this.hotkeyHandler);}componentWillUnmount(){hotkey.removeHandler(this.hotkeyHandler);}}

Acknowledgements

This approach was extracted from react-bootstrap.

License

MIT