Skip to content
A simple mixin for application hotkeys
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__
example
.eslintrc
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
index.js
package.json
test-utils.js

README.md

react-hotkey

Build Status

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

MIT

You can’t perform that action at this time.