Example

See it in action at https://codesandbox.io/s/n6txl.

The Problem

Have you ever come across a tree like this:

<ContextA.Provider>
  <ContextB.Provider>
    <ContextC.Provider>
      ...
    </ContextC.Provider>
  </ContextB.Provider>
</ContextA.Provider>

Instead, we can compose/combine this list of providers:

<Compose items={[
  [ContextA, props],
  [ContextB, props],
  [ContextC, props],
]}>
  ...
</Compose>

Example 2

const AppProvider = compose(OneProvider, TwoProvider);


function OneProvider({ children }) {
  return <div>2:{children}</div>;
}

function TwoProvider({ children }) {
  return <div>1:{children}</div>;
}


function compose(...providers) {
  return function Composed({ children }) {
    return providers.reduce((child, Element) => {
      return <Element>{child}</Element>;
    }, children);
  };
}