@use-it/event-listener
Advanced tools
Comparing version
@@ -6,4 +6,4 @@ { | ||
}, | ||
"version": "0.1.1", | ||
"description": "A custom React Hook thst provides a useEventListener.", | ||
"version": "0.1.2", | ||
"description": "A custom React Hook that provides a useEventListener.", | ||
"main": "dist/event-listener.js", | ||
@@ -16,3 +16,3 @@ "umd:main": "dist/event-listener.umd.js", | ||
"type": "git", | ||
"url": "https://github.com/donavon/event-listener.git" | ||
"url": "https://github.com/donavon/use-event-listener.git" | ||
}, | ||
@@ -59,6 +59,6 @@ "scripts": { | ||
"global": { | ||
"branches": 0, | ||
"functions": 0, | ||
"lines": 0, | ||
"statements": 0 | ||
"branches": 100, | ||
"functions": 100, | ||
"lines": 100, | ||
"statements": 100 | ||
} | ||
@@ -65,0 +65,0 @@ } |
@@ -5,3 +5,3 @@ # @use-it/event-listener | ||
[](https://badge.fury.io/js/%40use-it%2Fevent-listener) | ||
[](https://badge.fury.io/js/%40use-it%2Fevent-listener) [](#contributors) | ||
@@ -45,3 +45,3 @@ This hook was inspired by [Dan Abramov](https://github.com/gaearon)'s | ||
| `handler` | A function that will be called whenever `eventName` fires on `element`. | | ||
| `element`\* | An optional element to listen on. Defaults to `global` (i.e., `window`). | | ||
| `element`\* | An optional element to listen on. Defaults to `global` (i.e., `window`). | | ||
@@ -52,4 +52,62 @@ ### Return | ||
## Example | ||
Let's look at some sample code. Suppose you would like to track the mouse | ||
position. You _could_ subscribe to mouse move events with like this. | ||
```js | ||
const useMouseMove = () => { | ||
const [coords, setCoords] = useState([0, 0]); | ||
useEffect(() => { | ||
const handler = ({ clientX, clientY }) => { | ||
setCoords([clientX, clientY]); | ||
}; | ||
window.addEventListener('mousemove', handler); | ||
return () => { | ||
window.removeEventListener('mousemove', handler); | ||
}; | ||
}, []); | ||
return coords; | ||
}; | ||
``` | ||
Here we're using `useEffect` to roll our own handler add/remove event listener. | ||
`useEventListener` abstracts this away. You only need to care about the event name | ||
and the handler function. | ||
```js | ||
const useMouseMove = () => { | ||
const [coords, setCoords] = useState([0, 0]); | ||
useEventListener('mousemove', ({ clientX, clientY }) => { | ||
setCoords([clientX, clientY]); | ||
}); | ||
return coords; | ||
}; | ||
``` | ||
## Live demo | ||
You can view/edit the sample code above on CodeSandbox. | ||
[](https://codesandbox.io/s/k38lyx2q9o) | ||
## License | ||
**[MIT](LICENSE)** Licensed | ||
## Contributors | ||
Thanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)): | ||
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> | ||
<!-- prettier-ignore --> | ||
| [<img src="https://avatars3.githubusercontent.com/u/887639?v=4" width="100px;" alt="Donavon West"/><br /><sub><b>Donavon West</b></sub>](http://donavon.com)<br />[🚇](#infra-donavon "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/donavon/use-event-listener/commits?author=donavon "Tests") [💡](#example-donavon "Examples") [🤔](#ideas-donavon "Ideas, Planning, & Feedback") [🚧](#maintenance-donavon "Maintenance") [👀](#review-donavon "Reviewed Pull Requests") [🔧](#tool-donavon "Tools") [💻](https://github.com/donavon/use-event-listener/commits?author=donavon "Code") | [<img src="https://avatars3.githubusercontent.com/u/8732191?v=4" width="100px;" alt="Kevin Kipp"/><br /><sub><b>Kevin Kipp</b></sub>](https://github.com/third774)<br />[💻](https://github.com/donavon/use-event-listener/commits?author=third774 "Code") | | ||
| :---: | :---: | | ||
<!-- ALL-CONTRIBUTORS-LIST:END --> | ||
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! |
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
8028
46.34%111
109.43%5
25%