61700675cd
This change removes useCallbag hook, it also reverts back changes for
hooks that only have tiny dependencies or dependencies that could have
been part of the hook itself. Effectivly only KeyboardJS and Rebound are
large packages that only partially are used by react-use, hence require
user to install them separately.
BREAKING CHANGE: 🧨 useCallbag hook is removed, some hooks KeyboardJS and Rebound installed
separately
1.7 KiB
useKeyPressEvent
React UI sensor hook that detects when the user is pressing a specific key on their keyboard and fires a specified keyup and/or keydown effect. If you only need to retrieve the state, see useKeyPress.
Complex bindings like detecting when multiple keys are held down at the same time or requiring them to be held down in a specified order are also available via KeyboardJS key combos. Check its documentation for further details on how to make combo strings.
The first argument is the key(s) to watch. If only a second argument (a function) is passed, it will be used in the keydown event. On the other hand, if a second and third argument are passed, the second will be used in the keyup event and the third in the keydown event. Essentially, keydown takes precedence.
Requires keyboardjs:
npm add keyboardjs
# or
yarn add keyboardjs
Usage
import React, { useState } from React;
import { useKeyPressEvent } from "react-use";
const Demo = () => {
const [count, setCount] = useState(0);
const increment = () => setCount(count => ++count);
const decrement = () => setCount(count => --count);
const reset = () => setCount(count => 0);
useKeyPressEvent(']', increment, increment);
useKeyPressEvent('[', decrement, decrement);
useKeyPressEvent('r', reset);
return (
<div>
<p>
Try pressing <code>[</code>, <code>]</code>, and <code>r</code> to
see the count incremented and decremented.</p>
<p>Count: {count}</p>
</div>
);
};
Reference
useKeyPressEvent('<key>', onKeydown);
useKeyPressEvent('<key>', onKeyup, onKeydown);