Compose React Providers to avoid too much chaining

readme.md

Too gist is too resolve problem of chaining of many context providers

  <AuthProvider>
    <ThemeProvider>
        <LionessProvider>
            <ErrorProvider>
              <LoadingProvider>
                <Component />
              </LoadingProvider>
            </ErrorProvider>
        </LionessProvider>
    </ThemeProvider>
  </AuthProvider>

Solution

  <ComposeProviders
    with=[
       { component: AuthProvider },
       {  
         component: ThemeProvider,
         props: { 
           theme: { main: 'palevioletred' }
         }
       },
       { component: LionessProvider },
       { component: ErrorProvider },
       { component: LoadingProvider }
    ]
  >
    <Component />
  </ComposeProviders>

ComposeProviders.tsx

import React, { ElementType, ReactNode, ReactElement } from 'react'

interface ComposeProvidersProps {
  with: Array<{
    component: ElementType,
    props?: Record<string, unknown>,
  }>,
  children: ReactNode,
}

const ComposeProviders = ({
  with: Providers,
  children,
}: ComposeProvidersProps): ReactElement => (
  <>
    {Providers.reduce(
      (accProviders, Provider) => (
        <Provider.component {...Provider.props}>{accProviders}</Provider.component>
      ),
      children,
    )}
  </>
)

export default ComposeProviders;