Component, Container, External

Component.js

'use strict';

var React = require('react'),
	PureRenderMixin = require('react/lib/ReactComponentWithPureRenderMixin');

function Component(componentRender) {
	return React.createClass({
		mixins: [PureRenderMixin],
		displayName: componentRender.name,

		render() {
			return componentRender(this.props);
		}
	});
}

module.exports = Component;

Container.js

'use strict';

var React = require('react');

function subscribe(key, store, component) {
	return store.subscribe(state => component.setState({[key]: state}));
}

function Container(stores, componentRender) {
	var keys = Object.keys(stores);

	return React.createClass({
		displayName: componentRender.name,

		getInitialState() {
			return keys.reduce((state, key) => ({
				[key]: stores[key].getState(),
				...state
			}), {});
		},

		componentDidMount() {
			this.dispose = keys.map(key => subscribe(key, stores[key], this));
		},

		componentWillUnmount() {
			this.dispose.forEach(fn => fn());
		},

		render() {
			return componentRender(this.state, this.props);
		}
	});
}

module.exports = Container;

External.js

import React from 'react';

export default function External(componentRender, componentUpdate) {
	return React.createClass({
		displayName: componentRender.name,

		shouldComponentUpdate() {
			return false;
		},

		componentWillReceiveNewProps(newProps){
			componentUpdate(newProps);
		},

		componentDidMount() {
			componentRender(React.findDOMNode(this), this.props);
		},

		render() {
			return (
				<div className='external-content' />
			);
		}
	});
}