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.

$3

* 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]).

$3

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

Example

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

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

render() {
return (

tabIndex={ 0 }
onKeyDown={ this.handleKeyDown }>
{ / / }

)
}
}

App.propTypes = {
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