react-use-event-listeners
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

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

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

Package Sidebar

Install

npm i react-use-event-listeners

Weekly Downloads

3

Version

1.0.1

License

MIT

Unpacked Size

14.6 kB

Total Files

14

Last publish

Collaborators

  • 1natsu