# react-event-listener-hook

> A simple React hook for adding and removing event listeners on DOM nodes.

Latest version **0.1.2** (published 2022-12-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-event-listener-hook
pnpm add react-event-listener-hook
yarn add react-event-listener-hook
bun add react-event-listener-hook
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2022-12-25 |
| First published | 2022-12-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 19.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Mehmet Yasir Aktunç |
| Maintainers | mhmtyasr |
| Keywords | react, events, pubsub, hook |

## Links

- npm: https://www.npmjs.com/package/react-event-listener-hook
- Repository: https://github.com/mhmtyasr/react-event-listener-hook
- npm.io page: https://npm.io/package/react-event-listener-hook

## Alternatives

- [async-exit-hook](https://npm.io/package/async-exit-hook.md) — 3.7M weekly downloads
- [evnty](https://npm.io/package/evnty.md) — 7.2K weekly downloads
- [eleventy-plugin-asciidoc](https://npm.io/package/eleventy-plugin-asciidoc.md) — 3.5K weekly downloads
- [@jswork/next-get2get](https://npm.io/package/@jswork/next-get2get.md) — 945 weekly downloads
- [@dashersw/axon](https://npm.io/package/@dashersw/axon.md) — 934 weekly downloads

## Recent versions

- 0.1.2 (latest) — 2022-12-25
- 0.1.0 — 2022-12-25

## README

# React Event Listener Hook

A simple React hook for adding and removing event listeners on DOM nodes.


## Installation

Install your-project with npm

```bash
 npm install react-event-listener-hook
 yarn add react-event-listener-hook
```
    
## Parameter


| Parameter | Type     | Description                |
| :-------- | :------- | :------------------------- |
| `eventName` | `string` | **Required**. A string representing the event to listen for, such as node event. |
| `defaultValue` | `any` | **Required**. the default value to use for the event listener. This can be any type, such as a function or an object. |
| `isSubscribe` | `boolean` | (optional) a boolean indicating whether to add or remove the event listener.<br/> The default value is true, which means the event listener will be added. If set to false, the event listener will be removed. |
| `onCallback` | `function` | (optional) a  function to be called when the event listener is triggered.<br/> This function takes two parameters: param, which is the value passed to the event listener, and myStateRef, which is the current state of the hook. The function should update the state using the state updater function provided by the hook. If the function does not return a value, the state will not be updated. This parameter can be set to null or undefined if not needed.|





## Usage/Examples

```javascript
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { useEventListener } from '../src/index';

const App = () => {
  const [example, setExample] = useEventListener<any[]>({
    eventName: 'test',
    defaultValue: [],
  });

  const [example1, setExample1] = useEventListener<any[]>({
    eventName: 'test1',
    defaultValue: [],
    isSubscribe: false, // if you don't want to subscribe to the event
    onCallback: (param, myStateRef) => {
      // if you want to do something with the data before it is set
      // if you return a value, it will be set as the new state
      return param;
    },
  });

  return <div>{example}</div>;
};
```

---
_Source: https://npm.io/package/react-event-listener-hook · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._