Socket
Book a DemoInstallSign in
Socket

react-shortcut-chooser

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-shortcut-chooser

A React component that lets the user choose keyboard shortcuts

1.1.2
latest
Source
npmnpm
Version published
Weekly downloads
4
-20%
Maintainers
1
Weekly downloads
 
Created
Source

React Shortcut Chooser

This is a React component that lets the user choose a keyboard shortcut. Native Mac apps have nice input fields that, when focused, capture all keyboard events and display the chosen keyboard shortcut in a nice string format. There was no equivalent JavaScript UI component for that, so I developed this library.

It's based on the key-event-to-string library that converts an event object into a readable format.

js-standard-style

Demo

I've added a minimalistic demo on RequireBin. It sometimes takes RequireBin a while to load the NPM modules though.

Installation

$ npm install --save react-shortcut-chooser

Usage

var ShortcutChooser = require('react-shortcut-chooser')
ReactDOM.render(<ShortcutChooser onUpdate={callback} />, el)

ShortcutChooser accepts a bunch of options:

keyvaluedefault value
modifierNeededAre only shortcuts with modifiers valid? Modifiers are cmd, ctrl, alt and shifttrue
keyNeededIs a key, other than a modifier, needed?true
onUpdateA callback that's called with the new value and the old valueNone, it's required
validateCan be used to validate a potential keyboard shortcut. Is only called if modifierNeeded and keyNeeded were satisfiedA function that always returns true
onInvalidDepending on modifierNeeded / keyNeeded / validate some keyboard shortcuts will be rejected. This callback will be called with the invalid keyboard shortcut if that happens. Could e.g. be used to display an error messageEmpty function
modifierCharsCan be used to change the format according to the key-event-to-string options. Could e.g. be used to get a Mac style{}

All other properties will be passed straight to the underlying input element. This is especially useful for setting a default value and styling it:

<ShortcutChooser onUpdate={callback} defaultValue="Ctrl + A" className="shortcutInput" />

Keywords

react

FAQs

Package last updated on 26 Mar 2016

Did you know?

Socket

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

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.