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

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