Build providers tree in react

react-providers-tree.tsx

import { ComponentType, ReactNode, FC } from 'react';

type ProviderWithProps<P = any> = [ComponentType<P>, P?];

const buildProvidersTree = <P extends ProviderWithProps[]>(
  providers: [...P]
): FC<{ children: ReactNode }> => {
  return ({ children }) =>
    providers.reduceRight<ReactNode>((acc, [Provider, props]) => {
      return props ? (
        <Provider {...props}>{acc}</Provider>
      ) : (
        <Provider>{acc}</Provider>
      );
    }, children);
};

interface ThemeProps {
  theme: 'light' | 'dark';
}

const ThemeProvider = ({ theme, children }: ThemeProps & { children: ReactNode }) => (
  <div className={theme}>{children}</div>
);

interface ValueProps {
  value: number;
}

const ValueProvider = ({ value, children }: ValueProps & { children: ReactNode }) => (
  <div data-value={value}>{children}</div>
);

const AuthProvider = ({ children }: { children: ReactNode }) => (
  <>{children}</>
);

const ProviderTree = buildProvidersTree([
  [AuthProvider],                  
  [ThemeProvider, { theme: 'dark' }],
  [ValueProvider, { value: 10 }],     
]);

// Component App
const App: FC = () => (
  <ProviderTree>
    <div>Your app content here</div>
  </ProviderTree>
);

export default App;