Composing components?

all.js

import React from 'react';
import reduce from 'lodash/collection/reduce';

function compose(Component, containers) {
  return reduce(containers, (ComposedComponent, containerCreator) => {
    return containerCreator(ComposedComponent);
  }, Component);
}

function createContainer(containerCreator) {
  return function lazyContainerCreator(Component, ...args) {
    return containerCreator(Component, ...args);
  };
}

const authenticationContainer = createContainer((Component) => {
  return class extends React.Component {
    // Check authentication

    render() {
      return React.createElement(Component, this.props);
    }
  };
});

const firebaseContainer = createContainer((Component, params) => {
  // Get stuff from firebase

  return class extends React.Component {
    render() {
      params;
      return React.createElement(Component, this.props);
    }
  };
});

class Dashboard extends React.Component {
  render() {
    return null;
  }
}

compose(Dashboard, [
  authenticationContainer(),
  userContainer(),
  firebaseContainer({
    subscribeTo: {
      feed: () => `/feed`,
    },
  }),
]);