Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-shortcut
Advanced tools
Readme
Convenient React component that detects if the given key combination is pressed, and triggers a callback
With npm:
$ npm install --save react-shortcut
Or with Yarn:
$ yarn add react-shortcut
Is very simple and straightforward! There are just a couple of props to pass in.
import ReactShortcut from 'react-shortcut';
// ...
// Somewhere in your component tree
<ReactShortcut
keys={/* String or array of strings containing the keys to be pressed, in any supported format */}
onKeysPressed={/* Callback when target key combination is pressed */}
/>;
All the props are required.
Name | Description | Type |
---|---|---|
keys | A string containing comma-separated key combinations or/and key sequences, or an array of such strings | A string or an array of strings |
onKeysPressed | A callback to be triggered when the user presses any of the specified key combinations | A function with no arguments |
The component supports both key combinations and key sequences.
A key combination is a string of key names separated by a plus sign, that describes what keys the user has to press at the same time, to execute the callback specified using onKeysPressed
prop.
Examples: Command+Shift+Left
, Ctrl+P
.
To react on the keys combination(s) press, use the following format:
import ReactShortcut from 'react-shortcut';
// Pass in the shortcut keys
<ReactShortcut
keys="command+k"
onKeysPressed={doSomethingOnShortcutPress}
/>
// ... or an array of shortcuts
<ReactShortcut
keys={['command+k', 'command+m']}
onKeysPressed={doSomethingOnShortcutPress}
/>
// ... or a string of comma-separated shortcuts
<ReactShortcut
keys="command+k,command+m"
onKeysPressed={doSomethingOnShortcutPress}
/>
A key sequence is a string of key names separated by a space character, that lists out the keys the user has to press one by one, to trigger the callback specified using onKeysPressed
prop.
Examples: Up Up Down Down Left Right Left Right B A Enter
, k o n a m i
.
To react on the keys sequence(s) press, use the following format:
import ReactShortcut from 'react-shortcut';
// Pass in the shortcut keys
<ReactShortcut
keys="k o n a m i"
onKeysPressed={doSomethingOnShortcutPress}
/>
// ... or an array of shortcuts
<ReactShortcut
keys={['k o n a m i', 'm a r i o b r o s enter']}
onKeysPressed={doSomethingOnShortcutPress}
/>
// ... or a string of comma-separated shortcuts
<ReactShortcut
keys="k o n a m i,m a r i o b r o s enter"
onKeysPressed={doSomethingOnShortcutPress}
/>
Mixing both modes is possible –just follow the same key combination/key sequence convention:
import ReactShortcut from 'react-shortcut';
// Array of shortcuts
<ReactShortcut
keys={['k o n a m i', 'shift+command+m']}
onKeysPressed={doSomethingOnShortcutPress}
/>
// ... or a string of comma-separated shortcuts
<ReactShortcut
keys="k o n a m i,shift+command+m"
onKeysPressed={doSomethingOnShortcutPress}
/>
It does. Moreover, it's implemented in TypeScript.
Nope. The component adds a global keyboard event listener and doesn't prevent events from bubbling or capturing.
Just use the component as many times as you need, just make sure the shortcuts aren't repeated.
No, the case doesn't matter.
There's an official™️ one called react-easter, for adding easter eggs triggered by the keypress.
The library is shipped "as is" under MIT License.
Feel free to contribute, but don't forget to write tests, mate/matess.
FAQs
Convenient React component that detects if the given key combination is pressed, and triggers a callback
The npm package react-shortcut receives a total of 69 weekly downloads. As such, react-shortcut popularity was classified as not popular.
We found that react-shortcut 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.