https://github.com/realdennis/usekeyup
Package a React hook useKeyup by using `useEventTarget`.
https://github.com/realdennis/usekeyup
event keyup react react-hooks useeventtarget window
Last synced: about 1 month ago
JSON representation
Package a React hook useKeyup by using `useEventTarget`.
- Host: GitHub
- URL: https://github.com/realdennis/usekeyup
- Owner: realdennis
- Created: 2019-02-09T12:28:08.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-09-03T14:52:27.000Z (over 5 years ago)
- Last Synced: 2025-03-16T06:19:24.645Z (2 months ago)
- Topics: event, keyup, react, react-hooks, useeventtarget, window
- Language: JavaScript
- Homepage:
- Size: 2.93 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# useKeyup
Get window size by hooks `keyup` event without side-effect.
## Install
```sh
$ npm install use-keyup
```
## How to use?
This example will auto removeEventListener when component unmounted.
```javascript
import useKeyup from 'use-keyup';
const demo = () => {
const [key, setKey] = useState([]);
useKeyup(e => setKey(e.code));
return
keyup {key}
;
};
```
Explicity Clean the handler.
```javascript
import useKeyup from 'use-keyup';
const demo = () => {
const [key, setKey] = useState([]);
const [cleanUp] = useKeyup(e => setKey(e.code));
useEffect(() => {
setTimeout(cleanUp, 3000);
// Set timer when mounted & after 3sec clean keyup
}, []);
return
keyup {key}
;
};
```
## What I Do?
Call clean-up function (to `removeEventListener`) when component has been unmounted.
Also, I export a `cleanUp` function, you can use this to explicity remove events when you need.
## Why This has a dependency of `createEventTargetHook`
This is a hooks infrastructure for easily package a event hooks.
See more [createEventTargetHook](https://github.com/realdennis/createEventTargetHook/).