https://github.com/1natsu172/react-use-event-listeners

Handling the addEventListener(s) using the hooks.
https://github.com/1natsu172/react-use-event-listeners

addeventlistener custom-hooks hooks react react-hooks removeeventlistener

Last synced: 3 months ago
JSON representation

Handling the addEventListener(s) using the hooks.

• Host: GitHub
• URL: https://github.com/1natsu172/react-use-event-listeners
• Owner: 1natsu172
• License: mit
• Created: 2019-03-27T15:54:56.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T17:59:26.000Z (over 2 years ago)
• Last Synced: 2025-12-26T16:50:24.288Z (7 months ago)
• Topics: addeventlistener, custom-hooks, hooks, react, react-hooks, removeeventlistener
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-use-event-listeners
• Size: 1.51 MB
• Stars: 2
• Watchers: 0
• Forks: 0
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[![](https://img.shields.io/npm/v/react-use-event-listeners.svg?style=for-the-badge&logo=npm&colorB=cc3534)](https://www.npmjs.com/package/react-use-event-listeners)

[![](https://img.shields.io/npm/types/react-use-event-listeners.svg?style=for-the-badge&logo=typescript&colorB=007acc)](https://www.npmjs.com/package/react-use-event-listeners)

[![](https://img.shields.io/circleci/project/github/1natsu172/react-use-event-listeners/master.svg?style=for-the-badge&logo=circleci&colorB=00992B)](https://circleci.com/gh/1natsu172/react-use-event-listeners)

![Codecov](https://img.shields.io/codecov/c/github/1natsu172/react-use-event-listeners.svg?color=%23FF2F6B&logo=codecov&style=for-the-badge)

# 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 (

    <>

      
{count}

      


        Click then count up

      

    >

  )

}

```


## 🔥 APIs

### `useEventListeners(values, dependencyList)`

| name           | require |  type  | default | decstiption                                                                                                                                       |

| -------------- | :-----: | :----: | :-----: | ------------------------------------------------------------------------------------------------------------------------------------------------- |

| values         |    ✓    | Object |    -    | See below                                                                                                                                         |

| dependencyList |    -    | Array  |    -    | [About React hooks 2nd argument array(DependencyList)](https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) |

#### About the 1st argument object(values)

| name        | require |    type     | default | decstiption                                                                                                         |

| ----------- | :-----: | :---------: | :-----: | ------------------------------------------------------------------------------------------------------------------- |

| eventTarget |    -    | EventTarget |    -    | [MDN - EventTarget](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget)                                   |

| listeners   |    ✓    |    Array    |    -    | [README - register-event-listeners](https://github.com/1natsu172/register-event-listeners#the-element-of-the-array) |

##### What's listeners?

The listeners are the same format as dependency module [register-event-listeners](https://github.com/1natsu172/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.

```javascript

{

  eventTarget: eventTargetRef.current,

  listeners:[

    ['touchstart', onTouchStart, {capture: true, once: true}],

    ['touchmove', onTouchMove, { passive: false }],

    ['touchend', onEnd],

    ['touchcancel', onEnd]

  ]

}

```

## 💚 Running the tests

with [Jest](https://jestjs.io/).

```bash

yarn test

```

or

```bash

npm run test

```

## 🏷 Versioning

Use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/1natsu172/handy-media-query/tags). 

## ©️ License

MIT © [1natsu172](https://github.com/1natsu172)