Compose for React Context

Compose.tsx

import React from 'react'

/**
 * Usage:
 *
 * <Compose components={[
 *   [BrowserRouter, browserValue], 
 *   [AuthProvider, authValue], 
 *   [ThemeProvider, themeValue], 
 *   [ChatProvider, chatValue]
 * ]}>
 *   <App />
 * </Compose>
 */

interface Props {
  contexts: Array<[Context<any>, any]>
  children: ReactNode
}

export default function Compose(props: Props) {
  const { contexts = [], children } = props

  return (
    <>
      {contexts.reduce((acc, [Context, value]) => {
        return <Context.Provider value={value}>{acc}</Context.Provider>
      }, children)}
    </>
  )
}