# @hashiprobr/react-use-emitter-and-listener

> React Hooks for emitting and listening to events with a syntax inspired by contexts and effects

Latest version **1.1.0** (published 2023-05-31) · ISC license · 0 weekly downloads

## Install

```sh
npm install @hashiprobr/react-use-emitter-and-listener
pnpm add @hashiprobr/react-use-emitter-and-listener
yarn add @hashiprobr/react-use-emitter-and-listener
bun add @hashiprobr/react-use-emitter-and-listener
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2023-05-31 |
| First published | 2022-01-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Marcelo Hashimoto |
| Maintainers | hashiprobr |
| Keywords | JavaScript, React, React Hook, React Context, createContext, useContext, useEffect |

## Links

- npm: https://www.npmjs.com/package/@hashiprobr/react-use-emitter-and-listener
- Repository: https://github.com/hashiprobr/react-use-emitter-and-listener
- Homepage: https://github.com/hashiprobr/react-use-emitter-and-listener#readme
- Issues: https://github.com/hashiprobr/react-use-emitter-and-listener/issues
- npm.io page: https://npm.io/package/@hashiprobr/react-use-emitter-and-listener

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2023-05-31
- 1.0.5 — 2022-07-24
- 1.0.4 — 2022-01-23
- 1.0.3 — 2022-01-22
- 1.0.2 — 2022-01-22
- 1.0.1 — 2022-01-22
- 1.0.0 — 2022-01-22

## README

react-use-emitter-and-listener
==============================

**React Hooks for emitting and listening to events with a syntax inspired by
contexts and effects**

This module provides one function and two React Hooks that allow components to
create and emit events with a syntax inspired by contexts, and to listen to
events with a syntax inspired by `useEffect`.

* The `createEvent` function creates and returns a new event. Like a context,
  this event has a `Provider` component that should wrap all components that
  intend to use it.

* The `useEmitter` hook receives an event and returns a function that should be
  called whenever the component wants to emit this event.

* The `useListener` hook is similar to `useEffect`. The difference is that,
  while the latter should use props or states as dependencies, the former should
  use events. Whenever any of the events in the list is emitted, the function is
  called.


Peer dependencies
-----------------

``` json
{
    "@hashiprobr/react-create-state-context": "1.0.6",
    "react": "17.0.2"
}
```


Install
-------

With npm:

```
npm install @hashiprobr/react-use-emitter-and-listener
```

With yarn:

```
yarn add @hashiprobr/react-use-emitter-and-listener
```

If using Expo, add the module to `webpack.config.js`:

``` js
const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
    const config = await createExpoWebpackConfigAsync({
        ...env,
        babel: {
            dangerouslyAddModulePathsToTranspile: [
                '@hashiprobr/react-create-state-context',
            ],
        },
    }, argv);
    return config;
};
```

If `webpack.config.js` does not exist, create it with:

```
expo customize:web
```


Example
-------

``` js
import React, { useState } from 'react';

import { Text, Button } from 'react-native';

import { createEvent, useEmitter, useListener } from '@hashiprobr/react-use-emitter-and-listener';

const IncrementEvent = createEvent();

function A() {
    const emitIncrement = useEmitter(IncrementEvent);

    return (
        <Button title="+" onPress={emitIncrement} />
    );
}

function B() {
    const [counter, setCounter] = useState(0);

    useListener(() => {
        setCounter(counter + 1);
    }, [IncrementEvent]);

    return (
        <Text>{counter}</Text>
    );
}

export default function MyApp() {
    return (
        <IncrementEvent.Provider>
            <A />
            <B />
        </IncrementEvent.Provider>
    );
}
```

---
_Source: https://npm.io/package/@hashiprobr/react-use-emitter-and-listener · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._