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 from 'react'

interface IProviderProps {
  component: React.ElementType,
  props?: Record<string, any>,
}

interface IComposeProvidersProps {
  with: Array<IProviderProps>,
  children: React.ReactNode,
}

const ComposeProviders = ({
  with: Providers,
  children,
}: IComposeProvidersProps): React.ReactElement => (
  <React.Fragment>
    {Providers.reduce(
      (AccProviders, Provider) => (
        <Provider.component {...Provider.props}>{AccProviders}</Provider.component>
      ),
      children,
    )}
  </React.Fragment>
)

export default ComposeProviders;