@rooks/use-key-ref
rooks. All hooks now reside in a single package which you can install using
Note: Future updates to this package have moved to the main packagenpm install rooks
or
yarn add rooks
Rooks is completely treeshakeable and if you use only 1 of the 50+ hooks in the package, only that hook will be bundled with your code. Your bundle will only contain the hooks that you need. Cheers!
About
Very similar useKey but it returns a ref
Installation
npm install --save @rooks/use-key-ref
Importing the hook
import useKeyRef from "@rooks/use-key-ref"
Usage
Basic example with keydown
function Demo() {
function vowelsEntered(e) {
console.log("[Demo 1] You typed a vowel");
}
// window is the target
const inputRef = useKeyRef(["a", "e", "i", "o", "u"], vowelsEntered);
return (
<>
<p>Press a,e,i,o,u in the input to trigger a console.log statement</p>
<input ref={inputRef} />
</>
);
}
render(<Demo />);
Multiple handlers on the same element
function Demo() {
function vowelsEntered(e) {
console.log("[Demo 1] You typed a vowel");
}
function capitalVowelsEntered(e) {
console.log("[Demo 1] You typed a capital vowel");
}
// window is the target
const keyRef1 = useKeyRef(["a", "e", "i", "o", "u"], vowelsEntered);
const keyRef2 = useKeyRef(["A", "E", "I", "O", "U"], capitalVowelsEntered);
const inputRef = useMergeRefs(keyRef1, keyRef2)
return (
<>
<p>Press a,e,i,o,u in the input to trigger a console.log statement</p>
<input ref={inputRef} />
</>
);
}
render(<Demo />);
Multiple kinds of events
function Demo() {
function onKeyInteraction(e) {
console.log("[Demo 2]Enter key", e.type);
}
const inputRef = useKeyRef(["Enter"], onKeyInteraction, {
target: inputRef,
eventTypes: ["keypress", "keydown", "keyup"]
});
return (
<>
<p>Try "Enter" Keypress keydown and keyup </p>
<p>
It will log 3 events on this input. Since you can listen to multiple
types of events on a keyboard key.
</p>
<input ref={inputRef} />
</>
);
}
render(<Demo />);
Conditionally setting handlers
function Demo() {
const [shouldListen, setShouldListen] = useState(false);
function toggleShouldListen() {
setShouldListen(!shouldListen);
}
function onKeyInteraction(e) {
console.log("[Demo 3] Enter key", e.type);
}
const inputRef = useKeyRef(["Enter"], onKeyInteraction, {
eventTypes: ["keypress", "keydown", "keyup"],
when: shouldListen
});
return (
<>
<p>
Enter key events will only be logged when the listening state is true.
Click on the button to toggle between listening and not listening
states.{" "}
</p>
<p>
Handy for adding and removing event handlers only when certain
conditions are met.
</p>
<input ref={inputRef} />
<br />
<button onClick={toggleShouldListen}>
<b>{shouldListen ? "Listening" : "Not listening"}</b> - Toggle{" "}
</button>
</>
);
}
render(<Demo />);