Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    react-keybinding-componentpublic

    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'); // ES5

    Get 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

    install

    npm i react-keybinding-component

    Downloadsweekly downloads

    655

    version

    0.5.1

    license

    ISC

    repository

    githubgithub

    last publish

    collaborators

    • avatar