react-keybindings

React Keybindings

Add keybindings in React apps.

Installation

React Keybindings requires React(DOM) 0.14 or later.

npm install --save react-keybindings

Usage

React Keybindings provides a mapActionsToKeys higher-order component to wrap an existing component. It allows you to map actions to shortcuts and get the triggered actions in props.

You can write shortcuts as strings (e.g. "ctrl+shift+s") or as arrays of key codes (e.g. [17, 65]).

Example:

import React from "react"
import mapActionsToKeys from "react-keybindings"

class App extends React.Component {
  handleKeyDown = () => {
    console.log(this.props.pressedKeys) // [17, 65]
    console.log(this.props.keyActions) // ["FOO"]
  };

  render() {
    return (
      <div
        tabIndex={ 0 }
        onKeyDown={ this.handleKeyDown }>
        { /* */ }
      </div>
    )
  }
}

App.propTypes = {
  pressedKeys: React.PropTypes.arrayOf(
    React.PropTypes.number
  ),
  keyActions: React.PropTypes.arrayOf(
    React.PropTypes.string
  )
}

export default mapActionsToKeys({
  FOO: "ctrl+a" // or [17, 65]
})(App)

Note: it's up to you to prevent default browser actions.

License

MIT