!Codecov

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

``bash
yarn add react-use-event-listeners
`

or

with npm

`bash
npm install react-use-event-listeners
`

💁 Usage

example component is count-up button app

`javascript
import { useEventListeners } from 'react-use-event-listeners'

const CountUpApp = () => {
const eventTargetRef = useRef(null)

const countUp = useCallback(() => {
setCount(prev => prev + 1)
}, [])

const handleOver = useCallback(() => {
console.log('user will click count-up button')
}, [])

useEventListeners(
{
eventTarget: eventTargetRef.current,
listeners: [
['click', countUp],
['pointerover', handleOver],
]
},
[eventTargetRef.current]
)

return (
<>


`javascript
{
eventTarget: eventTargetRef.current,
listeners:[
['touchstart', onTouchStart, {capture: true, once: true}],
['touchmove', onTouchMove, { passive: false }],
['touchend', onEnd],
['touchcancel', onEnd]
]
}
`

💚 Running the tests

with Jest.

`bash
yarn test
`
or

`bash
npm run test
``

🏷 Versioning

Use SemVer for versioning. For the versions available, see the tags on this repository.

©️ License

MIT © 1natsu172