mc-zone / react-event-emitter-mixin

Custom event utilities with lifecycle maintenance for React (both React and React-Native)

react-event-emitter-mixin

Custom event utilities with lifecycle maintenance for React (Both React and React Native)

Getting Started

Install via npm

npm i react-event-emitter-mixin --save

Useage

Communicate between components under event emitter.

var EventEmitterMixin = require('react-event-emitter-mixin');

var Child = React.createClass({
    mixins:[EventEmitterMixin],
    render(){
        return (
            <View>
                <TouchableOpacity
                    onPress={()=>{
                        this.eventEmitter('emit','eventA','foo','bar');
                    }}
                >
                    <Text>press to emit event</Text>
                </TouchableOpacity>
            </View>
        );
    }
});
var Parent = React.createClass({
    mixins:[EventEmitterMixin],
    componentWillMount(){
        this.eventEmitter('on','eventA',(a,b)=>{
            alert(a); //'foo'
            alert(b); //'bar'
        });
    },
    render(){
        return (
            <View style={{paddingTop:100}}>
                <Child />
            </View>
        );
    }
});

Same usage when you are using ReactJs on Web.

Lifecycle maintenance

Auto clean listeners when components be unmounted.

var Child = React.createClass({
    mixins:[EventEmitterMixin],
    componentWillMount(){
        this.eventEmitter('on','eventB',()=>{
            alert('Will not show if `Child` was unmounted or not mounted')
        });
        this.eventEmitter('one','eventB',()=>{
            alert('Once time per lifecycle')
        });
    },
    render(){
        //...
    }
});
var Parent = React.createClass({
    mixins:[EventEmitterMixin],
    name:'parent',
    getInitialState(){
        return {
            mountChild:true,
        }
    },
    render(){
        return (
            <View style={{paddingTop:100}}>
                {this.state.mountChild && (
                    <Child />
                )}
                <TouchableOpacity
                    onPress={()=>{
                        this.setState({mountChild:!this.state.mountChild})
                    }}
                >
                    <Text>mount/unmount child</Text>
                </TouchableOpacity>
                <TouchableOpacity
                    onPress={()=>{
                        this.eventEmitter('emit','eventB');
                    }}
                >
                    <Text>press to emit event</Text>
                </TouchableOpacity>
            </View>
        );
    }
});

API

//Add event listener
this.eventEmitter('on', eventName:string, callback:function);

//Add once-only (per lifecycle) event listener
this.eventEmitter('one', eventName:string, callback:function);

//Remove event listeners which come from current component (or remove all)
this.eventEmitter('off', eventName:string, callback:function [,shouldRemoveAll:Boolean] );

//Emit event 
this.eventEmitter('emit', eventName:string [,data1 [,data2,...] ] );

LICENSE

MIT.

Welcome PR :)

react-event-emitter-mixin's Issues

ES6 usage

I was wondering how to use this mixin in ES6, instead of createClass(). Would love an example. Thanks!

沙发我的

虽然看不懂，但是感觉好强大的样子

Code does not uglify

When running this module through Uglifyjs, we hit an error.

Unexpected token punc «(», expected punc «:» [./~/react-event-emitter-mixin/EventEmitterMixin.js:10,0]

It looks like invalid JS.

It's the same just running it through Uglifyjs on the command line and also when it goes through webpack, with babel and react enabled.

https://github.com/mc-zone/react-event-emitter-mixin/blob/master/EventEmitterMixin.js#L9

Transform source into ES5

Transform source into ES5 so that it does not require changes to build settings. In many cases, node_modules are excluded from being transformed anyways.