# react-native-general-listener

> A general event listener for React Native.

Latest version **1.0.3** (published 2019-02-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-general-listener
pnpm add react-native-general-listener
yarn add react-native-general-listener
bun add react-native-general-listener
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2019-02-16 |
| First published | 2018-08-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Xiaosong Gao |
| Maintainers | smartshallot |
| Keywords | React-Native, event-listener |

## Links

- npm: https://www.npmjs.com/package/react-native-general-listener
- Repository: https://github.com/gaoxiaosong/react-native-general-listener
- Homepage: https://github.com/gaoxiaosong/react-native-general-listener#readme
- Issues: https://github.com/gaoxiaosong/react-native-general-listener/issues
- npm.io page: https://npm.io/package/react-native-general-listener

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

- 1.0.3 (latest) — 2019-02-16
- 1.0.2 — 2018-10-31
- 1.0.1 — 2018-09-05
- 1.0.0 — 2018-08-31

## README

# react-native-general-listener

[![npm version](https://img.shields.io/npm/v/react-native-general-listener.svg?style=flat)](https://www.npmjs.com/package/react-native-general-listener)
[![Build Status](https://travis-ci.org/gaoxiaosong/react-native-general-listener.svg?branch=master)](https://travis-ci.org/gaoxiaosong/react-native-general-listener)

[中文说明](https://www.jianshu.com/p/43c2f39992b4)

It is a wrapper of `DeviceEventListener` to support following functions:

* Event level to make event name more readable.
* Subscribe all sub level event and unsubscribe.

## Install

Install by Yarn:

```shell
yarn add react-native-general-listener
```

Install by NPM:

```shell
npm install --save react-native-general-listener
```

## Usage

Import the module in file:

```javascript
import Listener from 'react-native-general-listener';
```

Then you can register, unregister or trigger an event type.

### Event Type Structure

An event type can be a string, an array of string, or an object.

* a string: Use the string as event name directly, it is not supported to trigger parent or child event.
* an array of string: We will use seperator to connect these strings to generate event name. And you can register with listen to its child event, or trigger its parent event.
* an object: Use the json string of object as event name. We do not recommend this usage.

### Register

We have two register function:

* register
* registerWithSubEvent

They both have two parameters:

* type: Event type.
* func: Event callback, will be called when the event is triggered.

Example:

```javascript
this.loginListener1 = Listener.register('LoginEvent', this.loginFn);
this.loginListener2 = Listener.register(['TestApp', 'Login', userId], this.loginFn);
```

The only difference between `register` and `registerWithSubEvent` is: the second one register event type with all sub level event types.

The function will return an object to used when `unregister` event type.

### Unregister

You can unregister one event listener or all of an event type.

The function `unregister` has three parameters:

* type: Event type.
* listenerObj: Listener object which is the returned value of `register` or `registerWithSubEvent`. If it is `undefined`, we will remove all event listeners of the event type.

Example:

```javascript
Listener.unregister('LoginEvent', this.loginListener1);
Listener.unregister('LoginEvent');
Listener.unregister(['TestApp', 'Login', userId], this.loginListener);
Listener.unregister(['TestApp', 'Login', userId]);
```

### Trigger

You can trigger event with an event type and an event param.

The function `trigger` has three parameters:

* type: Event type.
* state: Event param. It can be an object, a number, a boolean or any other data type.

When trigger an event with an array of string event type `[str0, str1, ... strn]`, we will find its parent event types to see if they use `registerWithSubEvent` function:

```javascript
const upperType = [str0, str1, ..., strn];
while ( /* upperType is not empty */ ) {
    // Convert upperType to upperName
    if ( /* upperName is registered with registerWithSubEvent function */ ) {
        // Trigger upper event with state
    }
    // Pop the last element of upperType
}
```

### Global Constant

There are two constant in the module:

* defaultSeperator: Default seperator, used as connector of event type to generate event name. Default is `'$'`。
* innerEventType: Inner event type key, when event is triggered, the event type will be set into event param if event param is an object. This key is `'_##_inner_##_event_##_type_##_'` to avoid key duplication in event param.

You can modify them globally:

```javascript
Listener.defaultSeperator = '#';
Listener.innerEventType = '123321';
```

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