Simplest event system you can use with React.js

A common scenario when dealing with React is inter-component communication, particularly when the components do not share a parent child relationship.

For example, consider the case of a context-dependent header bar action that affects the main content window.

    <AppBar />
    <Content />

Arguably, there are a number of alternative solutions such as providing a callback to the AppBar, and propogate back down to the content (you can invoke component methods directly via a ref), but we’ll focus on the non parent-child case mentioned in the official docs.

It turns out that if you’re using browserify you already have access to an implementation of NodeJS events, so emit away.

// eventService.js
'use strict';

var events = require('events');  
var eventEmitter = new events.EventEmitter();

module.exports = eventEmitter;  
var bus = require('./eventService');

// caller
handleAction: function(arg) {  
  bus.emit('addCard', arg);

// receiver
componentDidMount: function() {  
  bus.on('addCard', this.addCard);

Closing popovers in Ratchet

Ratchet is a css/js library for prototyping iOS apps. Maintained by Twitter, it looks similar to its more established older brother Bootstrap but is much less mature and has an anemic API.

Simple things like closing its popovers don’t seem to exist. If you need to do this, digging into the source reveals

element.addEventListener('touchend', function () {  
      popover.addEventListener('webkitTransitionEnd', onPopoverHidden);

for the popover backdrop, so doing something like

var backdrop = document.querySelector('div.backdrop');  
if (backdrop) {  
  // sad there's not real way to close this
  var evt = document.createEvent('TouchEvent');
  evt.initUIEvent('touchend', true, true); = backdrop;

to dispatch the touch event was sufficient for my purposes.

See for a short discussion on this.