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

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 (
    <>
      <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: eventTargetRef.current,
  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