Skip to content

Instantly share code, notes, and snippets.

@simenbrekken
Created August 31, 2014 08:15
Show Gist options
  • Save simenbrekken/7f59bae89b6b31cc273e to your computer and use it in GitHub Desktop.
Save simenbrekken/7f59bae89b6b31cc273e to your computer and use it in GitHub Desktop.
React Keyboard Shortcuts Mixin
'use strict';
var KEYS = {
enter: 13,
left: 37,
right: 39,
escape: 27,
backspace: 8,
comma: 188,
shift: 16,
control: 17,
command: 91
};
var pressedKeys = {};
var onKeyDown = function(event) {
pressedKeys[event.which] = true;
};
var onKeyUp = function(event) {
pressedKeys[event.which] = null;
};
var KeyboardShortcutsMixin = {
onKeyboardShortcut: function(event, shortcuts) {
if (typeof shortcuts !== 'function') {
shortcuts = this.getKeyboardShortcuts();
}
return shortcuts.reduce(function(result, handler, key) {
var keyCode = KEYS[key] || key;
if (keyCode === event.keyCode) {
if (handler(event) === false) {
result = false;
}
}
return result;
}, true);
},
isKeyPressed: function(key) {
var keyCode = key in KEYS ? KEYS[key] : key;
return pressedKeys[keyCode];
},
componentDidMount: function() {
document.addEventListener('keyup', onKeyUp);
document.addEventListener('keydown', onKeyDown);
},
componentWillUnmount: function() {
document.removeEventListener('keyup', onKeyUp);
document.removeEventListener('keydown', onKeyDown);
}
};
module.exports = KeyboardShortcutsMixin;
@simenbrekken
Copy link
Author

Hi,

it needs to be hooked up to the element you want keyboard control of:

<MyComponent onKeyDown={this.onKeyboardShortcut} />

I might expand it to include global keys soon as well.

@m4tthumphrey
Copy link

Ah right that makes sense! Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment