declarative, concise keybindings for react

Downloads in past


9333.0.08 years ago9 years agoMinified + gzip package size for react-keybinding in KB


build status
Declarative, lightweight, and robust keybindings mixin for React.
  • Straightforward '⌘S' string syntax for declaring bindings
  • Automatically binds & unbinds keybindings when components mount and unmount
  • Allows listing of all currently-active keybindings
  • Run a function when a keybinding is hit or pass an action
to the keybinding method of that component
  • Doesn't fire keybindings accidentally triggered in inputs,
select boxes, or textareas.
  • Optionally coerce platform specific keybindings (i.e. '⌘S' on Mac to '^S' on Windows)


Install with npm and use in your React projects with either browserify or webpack.
$ npm install react-keybinding


var React = require('react'),
    Keybinding = require('../');
var HelloMessage = React.createClass({
  mixins: [Keybinding],
  keybindingsPlatformAgnostic: true,
  keybindings: {
    '⌘S': function(e) {
    '⌘C': 'COPY'
  keybinding: function(event, action) {
    // event is the browser event, action is 'COPY'
  render: function() {
    return React.createElement("div", null, "Hello");
React.render(React.createElement(HelloMessage, {name: "John"}), document.body);

There's a runnable example in the ./examples directory: to run it,
$ npm install
$ cd example
$ npm install
$ npm start

See tmcw/ditty for an example of react-keybinding in an application.


This module exposes a single mixin called Keybinding.
Where you use this mixin on Components, it expects a property called keybindings of the format:
keybindings: {
  // keys are strings: they can contain meta and shift symbols,
  // numbers, strings, etc
  '⌘S': function(e) {
    // bindings can map to functions that they call directly
  // or to constants that are passed to the component's
  // 'keybinding' method.
  '⌘C': 'COPY'

Platform agnostic keybindings will automatically listen for the 'Ctrl' equivalent of 'Cmd' keybindings, and vice-versa. To automatically coerce platform specific keybindings, provide a property called keybindingsPlatformAgnostic of the format:
keybindingsPlatformAgnostic: true,
keybindings: { ... }

The mixin provides a method for components called .getAllKeybindings(): this yields an array of all keybindings properties on all active components.


The full range of codes and modifiers supported is listed in


$ npm test