react-use-event-listeners
Handling the addEventListener(s) using the hooks.
Useful for listening to events that are not synthetic-events.
This hook is for one-EventTarget with multi event listeners, so not for multi-EventTargets with multi event listeners.
✨ Getting Started
with yarn
yarn add react-use-event-listeners
or
with npm
npm install react-use-event-listeners
💁 Usage
example component is count-up button app
const CountUpApp = { const eventTargetRef = const countUp = const handleOver = return <> <div className="displayCount">count</div> <div className="countUpButton" ref=eventTargetRef> Click then count up </div> </> }
🔥 APIs
useEventListeners(values, dependencyList)
name | require | type | default | decstiption |
---|---|---|---|---|
values | ✓ | Object | - | See below |
dependencyList | - | Array | - | About React hooks 2nd argument array(DependencyList) |
About the 1st argument object(values)
name | require | type | default | decstiption |
---|---|---|---|---|
eventTarget | - | EventTarget | - | MDN - EventTarget |
listeners | ✓ | Array | - | README - register-event-listeners |
What's listeners?
The listeners are the same format as dependency module register-event-listeners. Please refer to that document for details.
https://github.com/1natsu172/register-event-listeners#the-element-of-the-array
So, the 1st argument should be like this.
eventTarget: eventTargetRefcurrent listeners: 'touchstart' onTouchStart capture: true once: true 'touchmove' onTouchMove passive: false 'touchend' onEnd 'touchcancel' onEnd
💚 Running the tests
with Jest.
yarn test
or
npm run test
🏷 Versioning
Use SemVer for versioning. For the versions available, see the tags on this repository.
©️ License
MIT © 1natsu172