0.1.1 • Published 2 years ago
react-simple-keys v0.1.1
react-simple-keys
A React Hook to easily create shortcuts with a hook:
import useKeys from "react-simple-keys";
useKeys({
"cmd+k": (event) => {
console.log("Open search panel");
},
esc: (event) => {
console.log("Close search panel");
},
down: (event) => {
console.log("Highlight next item");
},
up: (event) => {
console.log("Highlight prev item");
},
enter: (event) => {
if (event.metaKey) {
console.log("Special open highlighted item");
} else {
console.log("Normal open highlighted item");
}
},
});
If the shortcut is matched, then the prevent default for that shortcut will be triggered.
useKeys({
"k", // Listening for simple "k" presses (excludes inputs/textareas/etc)
"cmd+k", // Listening when the modifier "cmd" is pressed
"!cmd+k", // Listening when "k" is pressed AND the modifier "cmd" is NOT pressed
"input:k" , // Listening for "k" pressed only while an input is focused
});
Shortcuts examples
A shortcut is defined with the key, and then the action to be taken is defined with the value as as function. The key can have multiple parts:
- A plain key, like
a
for the keyboard key a, "t" for the keyboard key t, etc. - A modifier
cmd+[...]
,shift+[...]
, etc. They are normally special keys with a plain key:cmd+a
,shift+k
, etc. - A negative modifier
!cmd+[...]
: to force an alternative case, you can dok: e => e.metaKey ? X() : Y()
, or alternatively you can specify two different modifiers, one negated:"cmd+k": X
+"!cmd+k": Y
. - A namespace
namespace:[...]
; this is so that global shortcuts do not activate while typing in an inbox, so we assume any shortcut without namespace is on"window"
(nothing is focused) one (so thatwindow:cmd+a
,body:cmd+a
orcmd+a
are all equivalent). If you want to listen only in inputs then you should doinput:cmd+a
; this is a valid CSS selector, could alternatively usetextarea:cmd+a
, etc. For listening on both unfocused and focused elements, use the"*"
namespace*:cmd+a
.