# use-event-listeners

> React node event hook

Latest version **0.1.0** (published 2022-03-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-event-listeners
pnpm add use-event-listeners
yarn add use-event-listeners
bun add use-event-listeners
```

## 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.0 |
| Published | 2022-03-24 |
| First published | 2021-10-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 1 |
| Unpacked size | 10.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | myckhel |
| Maintainers | myckhel |

## Links

- npm: https://www.npmjs.com/package/use-event-listeners
- Repository: https://github.com/myckhel/use-event-listeners
- Homepage: https://github.com/myckhel/use-event-listeners#readme
- Issues: https://github.com/myckhel/use-event-listeners/issues
- npm.io page: https://npm.io/package/use-event-listeners

## Dependencies (1)

- [events](https://npm.io/package/events.md) ^3.3.0

## Recent versions

- 0.1.0 (latest) — 2022-03-24
- 0.1.0-beta.0 (beta) — 2022-03-24
- 0.0.3 — 2021-12-28
- 0.0.2 — 2021-10-02

## README

# use-event-listeners

> React node event hook

[![NPM](https://img.shields.io/npm/v/use-event-listeners.svg)](https://www.npmjs.com/package/use-event-listeners) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

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

See [Nodejs Event](https://nodejs.org/api/events.html)

## Usage

### useEventListener

```jsx
import React, { useState } from 'react'

import useEventListener from 'use-event-listeners'

export default () => {
  const [text, setText] = useState('')

  const emmitter = useEventListener(
    {
      listeners: {
        setText: (text) => {
          setText(text)
        }
      },
      removeListeners: {
        setText: () => console.log('setText removed')
      }
    },
    []
  )

  return (
    <div>
      <div>
        Using useEventListener{' '}
        <span aria-label='smile' role='img'>
          😄
        </span>
        <div>Text input: {text}</div>
        <input
          value={text}
          onChange={({ target: { value } }) => emmitter.emit('setText', value)}
        />
      </div>
    </div>
  )
}
```

### useEmitter
```jsx
import React, { useState } from 'react'
import { useEmitter} from 'use-event-listeners'

const UseEmitter = () => {
  const emitter = useEmitter()

  return (
    <button onClick={() => emitter.emit('setText', '')}>Reset input</button>
  )
}
```

## Apis
### useEventListener
```ts
useEventListener({
  listeners: {'eventName': (...payloads, params) => any},

  removeListeners: {'eventName': () => any},

  params: {}
}, []: dependency): emitter
```

## useEmitter
```ts
useEmitter(): emitter
```

## emit
```ts
emitter.emit('eventName', ...payloads)
```

## License

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

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