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 of mapActionsToKeys(keymap)

React Keybindings provides a higher-order component to wrap an existing component. It allows you to map actions to shortcuts. Then you are able to know which actions have been triggered and which keys have been pressed.

Arguments

• keymap (Object): this is an object which map actions to shortcuts. You can write shortcuts as strings (e.g. "ctrl+shift+s") or as arrays of key codes (e.g. [17, 65]).

Returns

It returns a React component class that injects pressedKeys and keyActions into your component.

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