Socket
Socket
Sign inDemoInstall

react-keybinding-component

Package Overview
Dependencies
5
Maintainers
1
Versions
16
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-keybinding-component

A React keybinding component


Version published
Maintainers
1
Weekly downloads
1,110
decreased by-13.28%

Weekly downloads

Readme

Source

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 except onKey are optional.

PropertyDescriptionDefault value
onKey (required)the function executed after a key event() => {}
typekeyup or keydown'keydown'
targetthe 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
preventInputConflictprevent onKey from firing if you have an onChange on an input, a textarea or a selectfalse
preventDefaultprevent event defaultfalse
preventPropagationprevent event propagationfalse

Keywords

FAQs

Last updated on 22 Nov 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc