# All files / src CoreProviders.tsx

100% Statements 109/109
100% Branches 1/1
100% Functions 1/1
100% Lines 109/109

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    1101x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    277x
    277x
    277x
    277x
    277x
    277x
    277x
    277x
    277x
    277x
    277x
    277x
    277x
    277x
    277x
    277x
    277x
    277x
    277x
     "use client";
    import { type ReactElement, type ReactNode } from "react";
    import { SsrProvider } from "./SsrProvider.js";
    import { UserInteractionModeProvider } from "./interaction/UserInteractionModeProvider.js";
    import { AppSizeProvider } from "./media-queries/AppSizeProvider.js";
    import {
      DEFAULT_APP_SIZE,
      DEFAULT_APP_SIZE_QUERIES,
      type AppSize,
      type AppSizeQueries,
    } from "./media-queries/appSize.js";
    import {
      PortalContainerProvider,
      type PortalContainer,
    } from "./portal/PortalContainerProvider.js";

    /* eslint-disable @typescript-eslint/no-unused-vars */
    import { type MenuConfigurationProvider } from "./menu/MenuConfigurationProvider.js";
    import { type Snackbar } from "./snackbar/Snackbar.js";
    import { type LocalStorageColorSchemeProvider } from "./theme/LocalStorageColorSchemeProvider.js";
    import { type ThemeProvider } from "./theme/ThemeProvider.js";
    import { type useColorSchemeProvider } from "./theme/useColorSchemeProvider.js";
    import { type TooltipHoverModeProvider } from "./tooltip/TooltipHoverModeProvider.js";
    import { type WritingDirectionProvider } from "./typography/WritingDirectionProvider.js";
    /* eslint-enable @typescript-eslint/no-unused-vars */

    /** @remarks \@since 6.0.0 */
    export interface ReactMDCoreConfiguration {
      /**
       * Set this to `true` if you are using SSR. This will update some hook
       * behavior so that you will not have mismatched initial state between server
       * and client and correctly rehydrate after initial render.
       *
       * @defaultValue `false`
       */
      ssr?: boolean;

      /**
       * @defaultValue `DEFAULT_APP_SIZE`
       * @see {@link DEFAULT_APP_SIZE}
       */
      ssrAppSize?: Readonly<AppSize>;

      /**
       * @defaultValue `DEFAULT_APP_SIZE_QUERIES`
       * @see {@link DEFAULT_APP_SIZE_QUERIES}
       */
      appSizeQueries?: Readonly<AppSizeQueries>;

      /** @see {@link PortalContainerProvider} */
      portalContainer?: PortalContainer;
    }

    /** @remarks \@since 6.0.0 */
    export interface CoreProvidersProps extends ReactMDCoreConfiguration {
      children: ReactNode;
    }

    /**
     * **Client Component**
     *
     * This is a convenience wrapper for initializing providers for react-md. This
     * includes configuration for:
     *
     * - {@link SsrProvider}
     * - {@link PortalContainerProvider}
     * - {@link AppSizeProvider}
     * - {@link UserInteractionModeProvider}
     *
     * This does not include every provider within `react-md` to help decrease the
     * bundle size for unused features. Here are some other providers that might be
     * useful to initialize near the root of your app:
     *
     * - {@link MenuConfigurationProvider} - If you want to render menus as sheets
     *   on phones or other configuration.
     * - {@link LocalStorageColorSchemeProvider}/{@link useColorSchemeProvider} - If
     *   you want to allow the user to select a light, dark, or system theme
     * - {@link WritingDirectionProvider} - If you need dynamic support for ltr and
     *   rtl languages
     * - {@link ThemeProvider} - If you allow the user to dynamically configure the
     *   `react-md` theme
     * - {@link TooltipHoverModeProvider} - If you want tooltips to appear
     *   immediately for a time after another tooltip has become visible. You can
     *   also configure the global visible delay.
     * - {@link Snackbar} - This isn't a provider but this is how you can display
     *   alerts in your app
     *
     * @remarks \@since 6.0.0
     */
    export function CoreProviders(props: CoreProvidersProps): ReactElement {
      const {
        ssr = false,
        ssrAppSize = DEFAULT_APP_SIZE,
        appSizeQueries = DEFAULT_APP_SIZE_QUERIES,
        portalContainer,
        children,
      } = props;
      return (
        <SsrProvider ssr={ssr}>
          <PortalContainerProvider container={portalContainer}>
            <UserInteractionModeProvider>
              <AppSizeProvider {...appSizeQueries} ssrSize={ssrAppSize}>
                {children}
              </AppSizeProvider>
            </UserInteractionModeProvider>
          </PortalContainerProvider>
        </SsrProvider>
      );
    }