A React driver for Cycle.js that handles injection via context. Warning: you should probably not actually use this and prefer making your own driver with props instead.

react-driver.js

/* @flow */

import Rx from 'rx';
import React from 'react';
import ReactDOM from 'react-dom';

export function makeReactDriver<T>(
  containerId: string,
  childContextTypes: any,
  getChildContext: () => {[key: string]: () => void},
  source: T
): (elements$: Rx.Observable<ReactElement>) => T {
  const container = document.getElementById(containerId);
  const ContextProvider = React.createClass({
    childContextTypes,
    getChildContext,
    render() {
      return this.props.children;
    }
  });

  return function reactDriver(element$: Rx.Observable<ReactElement>) {
    element$.subscribe(
      (element) =>
        ReactDOM.render(
          <ContextProvider>
            {element}
          </ContextProvider>,
          container
        ),
      (err) => console.error('Error occured while rendering React', err)
    );

    return source;
  }
}

usage.js

const boardClear$ = new Rx.Subject();

const childContextTypes = {
  // using any unless someone tells me how to use Flowtype with this.
  boardClear$: React.PropTypes.any
};

function getChildContext(): any {
  return {
    boardClear$
  };
};

const source = {
  boardClear$
};

let drivers = {
  react: makeReactDriver('app', childContextTypes, getChildContext, source)
};