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=[
       AuthProvider,
       ThemeProvider,
       LionessProvider,
       ErrorProvider,
       LoadingProvider
    ]
  >
    <Component />
  </ComposeProviders>

ComposeProviders.tsx

import React from 'react'

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

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