https://github.com/meinto/react-native-event-listeners
global event listener extension for react or react-native
https://github.com/meinto/react-native-event-listeners
event-listener react react-native
Last synced: 2 months ago
JSON representation
global event listener extension for react or react-native
- Host: GitHub
- URL: https://github.com/meinto/react-native-event-listeners
- Owner: meinto
- License: mit
- Created: 2017-04-29T20:58:55.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T21:45:29.000Z (over 2 years ago)
- Last Synced: 2024-10-29T19:02:54.013Z (9 months ago)
- Topics: event-listener, react, react-native
- Language: JavaScript
- Homepage:
- Size: 939 KB
- Stars: 207
- Watchers: 6
- Forks: 17
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native Event Listeners
(This package isn't only restricted to react-native projects. The source is written in plain js with no dependencies to react-native.)
[](https://opencollective.com/react-native-event-listeners) [](https://badge.fury.io/js/react-native-event-listeners)
[](https://david-dm.org/tobiasMeinhardt/react-native-event-listeners)
[](https://david-dm.org/tobiasMeinhardt/react-native-event-listeners?type=dev)
[](https://www.npmjs.com/package/react-native-event-listeners)
[](https://www.npmjs.com/package/react-native-event-listeners)
[](https://travis-ci.org/meinto/react-native-event-listeners)
[](https://coveralls.io/github/meinto/react-native-event-listeners?branch=master)
## Why
In some very specific cases it can be charming to have a simple global event listener. While working with global event listeners **you don't have to pass touch events through the component tree** into other components or can **bypass easily the redux architecture** for example.
## Installation
```
npm install --save react-native-event-listeners
```
or
```
yarn add react-native-event-listeners
```
## Usage Example
*Hint: The event listeners also work across different files. You only have to import the ```EventRegister``` in every file you need to send or receive your events.*
```javascript
import { EventRegister } from 'react-native-event-listeners'
/*
* RECEIVER COMPONENT
*/
class Receiver extends PureComponent {
constructor(props) {
super(props)
this.state = {
data: 'no data',
}
}
componentWillMount() {
this.listener = EventRegister.addEventListener('myCustomEvent', (data) => {
this.setState({
data,
})
})
}
componentWillUnmount() {
EventRegister.removeEventListener(this.listener)
}
render() {
return {this.state.data}
}
}
/*
* SENDER COMPONENT
*/
const Sender = (props) => (
{
EventRegister.emit('myCustomEvent', 'it works!!!')
})
>Send Event
)
```
## API
```javascript
// import
import { EventRegister } from 'react-native-event-listeners'
```
| static method | return value | description |
| :------------------ | :---------------- | :------------------------------------------------------------- |
| addEventListener | string \| boolean | return value is the id of the event listener or false on error |
| removeEventListener | boolean | true on success otherwise false |
| removeAllListeners | boolean | true on success otherwise false |
| emitEvent | void | no return value |
| on | string \| boolean | **shorthand** for addEventListener |
| rm | boolean | **shorthand** for removeEventListener |
| rmAll | boolean | **shorthand** for removeAllListeners |
| emit | void | **shorthand** for emitEvent |
## Contributors
### Code Contributors
This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
### Financial Contributors
Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/react-native-event-listeners/contribute)]
#### Individuals
#### Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/react-native-event-listeners/contribute)]
