神刀安全网

A React component for letting the user choose a keyboard shortcut

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 thekey-event-to-string library that converts an event object into a readable format.

A React component for letting the user choose a keyboard shortcut

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 thekey-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" />

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » A React component for letting the user choose a keyboard shortcut

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址