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.

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:

| key | value | default value | |:--|:--|:--| | modifierNeeded | Are only shortcuts with modifiers valid? Modifiers are cmd, ctrl, alt and shift | true | | keyNeeded | Is a key, other than a modifier, needed? | true | | onUpdate | A callback that's called with the new value and the old value | None, it's required | | validate | Can be used to validate a potential keyboard shortcut. Is only called if modifierNeeded and keyNeeded were satisfied | A function that always returns true | | onInvalid | Depending 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 message | Empty function | | modifierChars | Can 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" />