
Security News
AGENTS.md Gains Traction as an Open Format for AI Coding Agents
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
react-shortcut-chooser
Advanced tools
A React component that lets the user choose keyboard shortcuts
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.
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 = 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" />
FAQs
A React component that lets the user choose keyboard shortcuts
The npm package react-shortcut-chooser receives a total of 0 weekly downloads. As such, react-shortcut-chooser popularity was classified as not popular.
We found that react-shortcut-chooser demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.