Package Exports
- react-keybinding-component
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-keybinding-component) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-keybinding-component
A React keybinding component, usable with es6, no mixin
Description
react-keybinding-component is a component that will help you set up keybindings in your app. For the moment, only simple key events are supported (one key only, keyup, keydown). It's just a less dirty way of using key events instead of having care of them with componentDidMount() in multiple components.
Examples
Import it in your project:
import KeyBinding from 'react-keybinding-component'; // ES6
var KeyBinding = require('react-keybinding-component'); // ES5Get the eventKey keyCode and log it
<KeyBinding onKey={ (e) => { console.log(e.keyCode) } } />Get the eventKey keyCode and log it on keyUp on the window element
<KeyBinding onKey={ (e) => { console.log(e.keyCode) } } type='keyup' elem={ window } />Have a look at options.
Options
All properties are optional.
| Property | Description | Default value |
|---|---|---|
| onKey | the function executed after a key event | () => {} |
| type | keyup or keydown | 'keydown' |
| target | the element you want to attach the event to, it can be an existing DOM element or a CSS selector (in that case, you will need to add a tabIndex='0' to your element, otherwise the event won't be caught) |
document |
| preventInputConflict | prevent onKey from firing if you have an onChange on an input, a textarea or a select | false |
| preventDefault | prevent event default | false |
| preventPropagation | prevent event propagation | false |