React Keyboard Shortcuts Mixin

KeyboardShortcutsMixin.js

'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;

When is onKeyboardShortcut supposed to be called? It's not called in the mixin anywhere...?

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.

Ah right that makes sense! Thanks