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.

Usage

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);
    }
}

Acknowledgements

This approach was extracted from react-bootstrap.

License

MIT