react-native-event-listeners
TypeScript icon, indicating that this package has built-in type declarations

1.0.7 • Public • Published

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.)

npm version dependencie status dev-dependency status npm npm travis build Coverage Status

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.

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 <Text>{this.state.data}</Text>
    }
}
 
/*
 * SENDER COMPONENT
 */
const Sender = (props) => (
    <TouchableHighlight
        onPress={() => {
            EventRegister.emit('myCustomEvent', 'it works!!!')
        })
    ><Text>Send Event</Text></TouchableHighlight>
)

API

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

Dependencies (1)

Dev Dependencies (5)

Package Sidebar

Install

npm i react-native-event-listeners

Weekly Downloads

16,734

Version

1.0.7

License

MIT

Unpacked Size

17.3 kB

Total Files

17

Last publish

Collaborators

  • meinto