# @anissoft/react-events

> Easy to use event emitters and listeners

Latest version **1.0.6** (published 2023-04-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install @anissoft/react-events
pnpm add @anissoft/react-events
yarn add @anissoft/react-events
bun add @anissoft/react-events
```

## Health

**Score 35/100 (D)** — status: abandoned.

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

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2023-04-13 |
| First published | 2021-08-30 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 25.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | alexey anisimov |
| Maintainers | anissoft |
| Keywords | react, events |

## Links

- npm: https://www.npmjs.com/package/@anissoft/react-events
- Repository: https://github.com/Anissoft/js-libs
- Homepage: https://github.com/Anissoft/js-libs/tree/master/packages/react-events#readme
- Issues: https://github.com/Anissoft/js-libs/issues
- npm.io page: https://npm.io/package/@anissoft/react-events

## 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.0.6 (latest) — 2023-04-13
- 1.0.4 — 2022-10-31
- 1.0.1 — 2021-10-06
- 1.0.0 — 2021-08-30

## README

# React Events

Use this if you want to send custom events or messages from one React component to another, without lifting state or using refs.

## Installation

Just run [`npm install` command](https://docs.npmjs.com/getting-started/installing-npm-packages-locally):

```bash
$ npm install @anissoft/react-events
```

## Usage

Just wrap your application in <CustomEventScope>:

```js
import React from "react";
import ReactDOM from "react-dom";
import { CustomEventScope } from "@anissoft/react-events";

/* ... */

ReactDOM.render(
  <CustomEventScope>
    <App />
  </CustomEventScope>,
  root
);
```

You can add event listener with hooks _useAddCustomEventListener_ or _useCusomEventListener_:

```js
import { useAddCustomEventListener } from "@anissoft/react-events";

function Component() {
  const addCustomeEventListener = useAddCustomEventListener();

  React.useEffect(() => {
    const removeEventListener = addCustomeEventListener("EventName", function listener(payload) {
      console.log(paylaod);
    });
  }, [...depsArray]);

  //...
}
```

or it's equivalent:

```js
import { useCustomEventListener } from "@anissoft/react-events";

function Component() {
  useCustomEventListener(
    "EventName",
    function listener(payload) {
      console.log(paylaod);
    },
    [...depsArray]
  );

  //...
}
```

To dispatch event - use hook _useDispatchCustomEvent_:

```js
import { useDispatchCustomEvent } from "@anissoft/react-events";

function Component() {
  const dispatchCustomeEvent = useDispatchCustomEvent();

  React.useEffect(() => {
    dispatchCustomeEvent("EventName", { data: "Some string" });
  }, []);
  //...
}
```

If you are using nested CustomScopes, you can isolate any of them - just pass prop _isolate=true_:

```js
  <CustomEventScope>
    {/* no events from child Scope will be fired in parent Scope  */}
     <CustomEventScope isolate>
     </CustomEventScope>
  </CustomEventScope>,
```

## Additional API

- _addGlobalEventListener_ - add event listener outside of React application;
- _removeGlobalEventListener_ - remove global event listener outside of React application;
- _dispatchGlobalEvent_ - fire event on global level;

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