1.1.2 • Published 8 years ago
react-shortcut-chooser v1.1.2
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-chooserUsage
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" />