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
keybindingmethod 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-keybindingvar React = require('react'),
Keybinding = require('../');
var HelloMessage = React.createClass({
mixins: [Keybinding],
keybindingsPlatformAgnostic: true,
keybindings: {
'⌘S': function(e) {
console.log('save!');
e.preventDefault();
},
'⌘C': 'COPY'
},
keybinding: function(event, action) {
// event is the browser event, action is 'COPY'
console.log(arguments);
},
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 startSee 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 SYNTAX.md.
$ npm test
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent