hull-react.js

const EVENT = 'CHANGE';

function Engine() {
  this._isInitialized = false;
  
  Hull.init({ /* CREDENTIALS */ }, () => {
    this._isInitialized = true;
    this.emitChange();
  };
  
  this.emitChange();
}

assign(Engine.prototype, EventEmitter.prototype, {
  getState() {
    return {
      isInitialized: this._isInitialized;
    }
  },
  
  addChangeListener(listener) {
    this.addListener(EVENT, listener)
  },

  removeChangeListener(listener) {
    this.removeListener(EVENT, listener);
  },
  
  emitChange() {
    this.emit(EVENT);
  }
});

const App = React.createClass({
  getInitialState() {
    return this.props.engine.getState();
  },

  componentWillMount() {
    this.props.engine.addChangeListener(this._onChange);
  },

  componentWillUnmount() {
    this.props.engine.removeChangeListener(this._onChange);
  },
  
  _onChange() {
    this.setState(this.props.engine.getState());
  },
  
  render() {
    if (this.state.isInitialized) {
      return <h1>Yep</h1>;
    } else {
      return <h1>Nope</h1>;
    }
  }
});

function bootstrap() {
  let engine = new Engine();
  
  let element = document.getElementById('app');
  React.render(<App engine={engine} />, element);
}

assign

• https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/assign
• https://www.npmjs.com/package/object-assign

EventEmitter

• https://github.com/asyncly/EventEmitter2