Component for composing providers in React v18 with Typescript

ProviderComposer.tsx

export interface IProviderComposerProps extends React.PropsWithChildren {
  /**
   *  Providers list
   * */
  with: React.FC<React.PropsWithChildren>[]
}

const ComposerFragment: React.FC<React.PropsWithChildren> = ({
  children,
}): JSX.Element => <>{children}</>

const providerReducer =
  (
    ParentProvider: React.FC<React.PropsWithChildren>,
    ChildProvider: React.FC<React.PropsWithChildren>,
  ) =>
  ({ children }: React.PropsWithChildren) =>
    (
      <ParentProvider>
        <ChildProvider>{children}</ChildProvider>
      </ParentProvider>
    )

/**
 * @Component
 * @name ProviderComposer
 * @description Component that receives a list of providers and composes them to a single component.
 */
export const ProviderComposer = (props: IProviderComposerProps) => {
  const ComposedProviders = props.with.reduce(providerReducer, ComposerFragment)

  return <ComposedProviders>{props.children}</ComposedProviders>
}

How to use

Instead of nesting providers like this:

<FirstProvider>
  <SecondProvider>
    <ThirdProvider>
      {children}
    </ThirdProvider>
  </SecondProvider>
</FirstProvider>

Use the ProviderComposer to make it cleaner:

<ProviderComposer
  with={[
    FirstProvider,
    SecondProvider,
    ThirdProvider
  ]}
>
  {children}
</ProviderComposer>

Nice, but how can I put some providers that has props ?
<MantineProvider theme={{ primaryColor: 'blue', fontFamily: 'Inter VP' }} withGlobalStyles withNormalizeCSS withCSSVariables > ?

@carlosrziegler you can create a component such as:

const MyProvider = ({ children }) => (
  <MantineProvider
    theme={{ primaryColor: 'blue', fontFamily: 'Inter VP' }}
    withGlobalStyles
    withNormalizeCSS
    withCSSVariables
  >
    {children}
  </MantineProvider>)

And then use that in the ProviderComposer.

<ProviderComposer with={[MyProvider]} />

As long as your component receives children and pass it along, you can even include complex logic inside the providers.

@thebinaryfelix do you stack them in order of dependency to each?

@t1amat9409 yes, because the order matters. In the example above, the FirstProvider should be placed in the first position of the array.

@thebinaryfelix nice! this is awesome!!

🚀🚀🚀

how to solve ESLint Component definition is missing display name?

I changed on named functions syntax for now

const providerReducer = (
  ParentProvider: React.FC<React.PropsWithChildren>,
  ChildProvider: React.FC<React.PropsWithChildren>,
) =>
  function providerReducerInner({ children }: React.PropsWithChildren) {
    return (
      <ParentProvider>
        <ChildProvider>{children}</ChildProvider>
      </ParentProvider>
    );
  };