Skip to main content
Version: v3.6.0


A hook which allows to setup callbacks when a combination of keys are pressed at the same time.​

An important difference between useKey and useKeys is that useKey checks if EITHER of the keys in the list is pressed, while useKeys checks if ALL of the keys in the list are active.

Build Status


npm install --save @rooks/use-keys

Importing the hook​

import useKeys from "@rooks/use-keys";


function Demo() {
const containerRef = React.useRef(document);
const inputRef = React.useRef(null);
const [isEventActive, setIsEventActive] = React.useState(true);
const [firstCallbackCallCount, setFirstCallbackCallCount] = React.useState(0);
["ControlLeft", "KeyS"],
() => {
alert("you presses ctrlLeft + s");
setFirstCallbackCallCount(firstCallbackCallCount + 1);
target: containerRef,
when: isEventActive
["m", "r"],
event => {
// event.stopPropagation();
console.log("here you go m and r");
when: isEventActive,
target: inputRef
return (
<div data-testid="container">
<p data-testid="first-callback">
Callback Run Count:
<p>Is events enabled ? ==> {isEventActive ? "Yes" : "No"}</p>
<p>Press CtrlLeft + s to see update in count</p>
onClick={() => {
Toggle event enabled
<div className="grid-container">
<input ref={inputRef} className="box1" tabIndex={1} />

render(<Demo />);