Skip to main content
Version: 5.7.2

useKey

About

keypress, keyup and keydown event handlers as hooks for react.

Installation

npm install --save rooks

Importing the hook

import { useKey } from "rooks";

Usage

Basic example with keydown

function Demo() {
const inputRef = useRef();
function windowEnter(e) {
console.log("[Demo 1] Enter key was pressed on window");
}
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
useKey(["Enter"], windowEnter);
useKey(["a", "e", "i", "o", "u"], vowelsEntered, {
target: inputRef,
});
useKey(["A", "E", "I", "O", "U"], capitalVowelsEntered, {
target: inputRef,
});
return (
<>
<p>Press enter anywhere to trigger a console.log statement</p>
<p>Press a,e,i,o,u in the input to trigger a console.log statement</p>
<p>Press A,E,I,O,U in the input to trigger a different log statement</p>
<input ref={inputRef} />
</>
);
}

render(<Demo />);

Multiple kinds of events

function Demo() {
const inputRef = useRef();
function onKeyInteraction(e) {
console.log("[Demo 2]Enter key", e.type);
}

useKey(["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 inputRef = useRef();
const [shouldListen, setShouldListen] = useState(false);
function toggleShouldListen() {
setShouldListen(!shouldListen);
}
function onKeyInteraction(e) {
console.log("[Demo 3] Enter key", e.type);
}

useKey(["Enter"], onKeyInteraction, {
target: inputRef,
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 />);

Arguments

Argument valueTypeDescriptionDefualt
keyListArrayA list of keys to listenundefined
callbackFunctionCallback function to be called when event is triggeredundefined
optionsObjectSee table belowundefined
Options valueTypeDescriptionDefualt
whenBooleanCondition which if true, will enable the event listenerstrue
eventTypesArray of number or stringKeyboardevent types to listen for. Valid options are keyDown, keyPress and keyUp['keydown']
targetHTMLElement reftarget ref on which the events should be listened.window

Returns

No return value


Codesandbox Examples

Fun Usekey Usage

Join Bhargav's discord server

You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.