Higher order component for React + Recompose allowing components to accept global hotkeys.

withHotkeys.js

// Usage:
//
// const backspace = 8;
//
// export default withHotkeys({
//   [backspace]: props => evt => {
//     ...
//   },
// })(YourComponent);

import React, { Component } from 'react';
import { hoistStatics, wrapDisplayName } from 'recompose';

export default function withHotkeys (handlers, useCapture = false) {
  return hoistStatics(BaseComponent =>
    class WithHotkeys extends Component {
      displayName = wrapDisplayName(BaseComponent, 'withHotkeys');

      componentDidMount () {
        window.addEventListener('keydown', this.handleKeyDown, useCapture);
      }

      componentWillUnmount () {
        window.removeEventListener('keydown', this.handleKeyDown, useCapture);
      }

      handleKeyDown = event => {
        const handler = handlers[event.keyCode];

        if (!handler) {
          return;
        }

        const handlerWithProps = Reflect.apply(handler, this, [this.props]);

        if (!handlerWithProps) {
          return;
        }

        event.preventDefault();
        event.stopPropagation();
        Reflect.apply(handlerWithProps, this, [event]);
      };

      render () {
        return <BaseComponent {...this.props} />;
      }
    }
  );
}