Skip to content

Instantly share code, notes, and snippets.

@brigand
Last active June 29, 2017 15:52
Show Gist options
  • Star 16 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save brigand/10399638 to your computer and use it in GitHub Desktop.
Save brigand/10399638 to your computer and use it in GitHub Desktop.
React JS Event-Emitter Mixin and Example
var React = require("react"), Dom = React.DOM;
var LogOutButton = require('./src/logout');
var events = require('api/events');
var Main = React.createClass({
// this mixin provides this.emitLogout, and if we set onLogout it'll be called when "logout" is emitted
mixins: [events.mixinFor("logout")],
getInitialState: function(){
return {
user: null
};
},
logIn: function(){
this.setState({
user: {name: "foobar"}
});
},
// update our state when the login event is emitted
onLogout: function(){
this.setState({
user: null
});
},
render: function() {
var user = this.state.user;
return Dom.div(null,
user && Dom.span(null, "Hi " + user.name),
user && LogOutButton(),
!user && Dom.button({onClick: this.logIn},
"log in")
);
}
});
React.renderComponent(Main(), document.body);
var React = require("react"), Dom = React.DOM;
var events = require('api/events');
var Logout = React.createClass({
mixins: [events.mixinFor("logout")],
render: function() {
window.x = this
// directly bind our event to a button click event
return Dom.button({
onClick: this.emitLogout
}, 'log out');
}
});
module.exports = Logout;
var EventEmitter = require('events').EventEmitter;
var globalEmitter = module.exports = new EventEmitter();
module.exports.mixinFor = function (eventName, events) {
events = events || globalEmitter;
// "fooBar" => "FooBar"
var pascal = eventName[0].toUpperCase()
+ eventName.slice(1);
var noop = function(){};
var mixin = {
componentWillMount: function(){
if (!this["on" + pascal]) {
return;
}
events.on(event, this["on" + pascal]);
},
componentWillUnmount: function(){
if (!this["on" + pascal]) {
return;
}
events.off(event, this["on" + pascal]);
}
};
// add emit method
mixin["emit" + pascal] =
events.emit.bind(events, event);
return mixin;
};
@bsodmike
Copy link

I found this from a [past comment or yours[(http://stackoverflow.com/a/25335645/495653) as I'm looking to trigger a component to re-render based on an external event triggering. Looking at the best approach to mixing in a simple event system.

Here's a quick fiddle I made http://jsfiddle.net/bsodmike/0bg5peor/

@kunalgupta1983
Copy link

Where is events.js in node modules in var EventEmitter = require('events').EventEmitter;

@mraaroncruz
Copy link

@kunalgupta1983 it is react-event-emitter.js

@hden
Copy link

hden commented Aug 6, 2015

@PriyaBhatt13
Copy link

When I tried to use it I got error on line 32 of react-event-emitter.js . which says event is not defined.

Copy link

ghost commented Aug 20, 2015

Sorry, what does this LINE stand for?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment