Skip to main content
react-md

Core Providers

The CoreProviders is a convenience wrapper for initializing the most common context providers within react-md. It includes:

The CoreProviders should be initialized near the root of your app.

import { CoreProviders } from "@react-md/core/CoreProviders";
import { type ReactElement, type ReactNode } from "react";

export interface RootProvidersProps {
  children: ReactNode;
}

export function RootProviders(props: RootProvidersProps): ReactElement {
  const { children } = props;

  return <CoreProviders>{children}</CoreProviders>;
}

Pass-through Props

The other context providers can be configured with pass through props:

import { CoreProviders } from "@react-md/core/CoreProviders";
import {
  DEFAULT_APP_SIZE,
  DEFAULT_APP_SIZE_QUERIES,
} from "@react-md/core/media-queries/appSize";
import { type ReactElement, type ReactNode } from "react";

export interface RootProvidersProps {
  children: ReactNode;
}

export function RootProviders(props: RootProvidersProps): ReactElement {
  const { children } = props;

  return (
    <CoreProviders
      // these are the defaults
      ssr={false}
      ssrAppSize={DEFAULT_APP_SIZE}
      appSizeQueries={DEFAULT_APP_SIZE_QUERIES}
      portalContainer={undefined}
    >
      {children}
    </CoreProviders>
  );
}