[finom/with-context-providers] A react decorator which wraps a component by context providers

withContextProviders.js

/*
  A bit of syntax sugar over context providers. Allows to turn code like this:
  <SomeProvider1>
    <SomeProvider2>
      <SomeProvider3>
        <MyComponent />
      </SomeProvider3>
    </SomeProvider2>
  </SomeProvider1>
  
  Into code like that:
  withContextProviders(SomeProvider1, SomeProvider2, SomeProvider3);
*/

import { createElement } from 'react';

export default function withContextProviders(...providers) {
  return (BaseComponent) => (props) => {
    let component = createElement(BaseComponent, props);
    providers.forEach((Provider) => {
      component = createElement(Provider, null, component);
    });

    return component;
  };
}