ProviderComposer.tsx

import { ComponentProps, JSXElementConstructor } from 'react';

export const provider = <C extends JSXElementConstructor<unknown>>(
  provider: C,
  props: Partial<ComponentProps<C>> = {}
) => [provider, props];

export const ProviderComposer = ({ providers, children }) => {
  for (let i = providers.length - 1; i >= 0; --i) {
    const [Provider, props] = providers[i];
    children = <Provider {...props}>{children}</Provider>;
  }
  return children;
};

z-readme.md

Usage

const Providers = ({ children }) => (
  <ProviderComposer
    providers={[
      provider(GoogleTagManager),
      provider(StylesProvider, { injectFirst: true }),
      provider(MUIThemeProvider, { theme: theme }),
    ]}
  >
    {children}
  </ProviderComposer>
);