React Shortcut Chooser
It's based on the key-event-to-string library that converts an event object into a readable format.
I've added a minimalistic demo on RequireBin. It sometimes takes RequireBin a while to load the NPM modules though.
$ npm install --save react-shortcut-chooser
var ShortcutChooser =ReactDOM
ShortcutChooser accepts a bunch of options:
||Are only shortcuts with modifiers valid? Modifiers are cmd, ctrl, alt and shift||
||Is a key, other than a modifier, needed?||
||A callback that's called with the new value and the old value||None, it's required|
||Can be used to validate a potential keyboard shortcut. Is only called if
||A function that always returns
||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" />