ComposeContextProvider

Exports Size
loading...
Gzip Size
loading...
Brotli Size
Source Code
View on GitHub
Docs
Edit this page

Compose multiple React context providers together.

Usage

src/context.tsx
'use client';
import { createContextState } from 'foxact/context-state';
import { SWRConfig } from 'swr';
 
const [SidebarActiveProvider, useSidebarActive, useSetSidebarActive] = createContextState(false);
const [AuthTokenProvider, useAuthToken, useSetAuthToken] = createContextState(false);
 
const MySWRProvider = ({ config, children }: React.PropsWithChildren<{ config: any }>) => {
  return (
    <SWRConfig
      value={{
        refreshInterval: 3000,
        ...config
      }}
    >
      <Dashboard />
    </SWRConfig>
  );
}
 
export {
  SidebarActiveProvider, useSidebarActive, useSetSidebarActive,
  AuthTokenProvider, useAuthToken, useSetAuthToken,
  MySWRProvider
};

Normally, to use multiple context providers, you would have to nest them like this:

src/app/layout.tsx
import { SidebarActiveProvider, AuthTokenProvider, MySWRProvider } from 'src/context';
 
export default function RootLayout({ children }) {
  return (
    <html>
      <head />
      <body>
        <SidebarActiveProvider>
          <AuthTokenProvider>
            {/** provider nesting hell */}
            <MySWRProvider config={{ fetcher }}>
              {children}
            </MySWRProvider>
          </AuthTokenProvider>
        </SidebarActiveProvider>
      </body>
    </html>
  );
}

With <ComposeContextProvider /> you can do this:

src/app/layout.tsx
import { SidebarActiveProvider, AuthTokenProvider, MySWRProvider } from 'src/context';
import { ComposeContextProvider } from 'foxact/compose-context-provider';
 
const contexts = [
  <SidebarActiveProvider />,
  <AuthTokenProvider />,
  // You can also pass prop to the composed providers
  <MySWRProvider config={{ fetcher }} />
];
 
export default function RootLayout({ children }) {
  return (
    <html>
      <head />
      <body>
        {/** composed providers */}
        <ComposeContextProvider contexts={contexts}>
          {children}
        </ComposeContextProvider>
      </body>
    </html>
  );
}
useUncontrolledCurrentYear