mirror of
https://github.com/streamich/react-use.git
synced 2025-12-08 18:02:14 +00:00
c0658f605f
Changes its interface, fixes bug of calling callback on initial mount,
useKeyPress hook is injected as dependency and can be overwirtten to
useKeyboardJs.
BREAKING CHANGE: 🧨 useKeyPressEvent hook modified for dependency injection and providing
event objects to user
44 lines
1.1 KiB
Markdown
44 lines
1.1 KiB
Markdown
# `useKeyPressEvent`
|
|
|
|
This hook fires `keydown` and `keyup` calllbacks, similar to how [`useKey`](./useKey.md)
|
|
hook does, but it only triggers each callback once per press cycle. For example,
|
|
if you press and hold a key, it will fire `keydown` callback only once.
|
|
|
|
|
|
## Usage
|
|
|
|
```jsx
|
|
import React, { useState } from React;
|
|
import useKeyPressEvent from 'react-use/lib/useKeyPressEvent';
|
|
|
|
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
|
|
|
|
```js
|
|
useKeyPressEvent('<key>', keydown);
|
|
useKeyPressEvent('<key>', keydown, keyup);
|
|
useKeyPressEvent('<key>', keydown, keyup, useKeyPress);
|
|
```
|