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>
}

@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>
    );
  };