Unstated HOC

MyComponent.tsx

import { ContainerOne, ContainerTwo } from './containers';

// ...

withUnstated(MyComponent, {
  one: ContainerOne,
  two: ContainerTwo
})

withUnstated.tsx

import React, { Component } from 'react';
import { Subscribe, Container } from 'unstated';
import hoistStatics from 'hoist-non-react-statics';

export default (
  WrappedComponent: typeof React.Component,
  containersObject: object
) => {
  class UnstatedComponent extends Component<any> {
    render() {
      const keys: string[] = Object.keys(containersObject);
      const containers: Array<Container<any>> = Object.values(containersObject);

      return (
        <Subscribe to={[...containers]}>
          {(...stores) => {
            const storeProps: any = {};
            keys.forEach((key, i) => (storeProps[key] = stores[i]));
            return <WrappedComponent {...storeProps} {...this.props} />;
          }}
        </Subscribe>
      );
    }
  }

  return hoistStatics(UnstatedComponent, WrappedComponent);
};