# All files / src NoSsr.tsx

100% Statements 55/55
100% Branches 3/3
100% Functions 1/1
100% Lines 55/55

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
    561x
    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
    7x
    7x
    7x
    7x
    4x
    7x
    7x
    7x
    7x
     "use client";
    import { useEffect, useState, type ReactElement, type ReactNode } from "react";
    import { useSsr } from "./SsrProvider.js";

    /** @remarks \@since 6.0.0 */
    export interface NoSsrProps {
      children: ReactNode;
    }

    /**
     * **Client Component**
     *
     * A small wrapper that can be used to render children client side only. The
     * main use-case are for components that rely on browser API to work correctly.
     *
     * @example
     * Simple Example
     * ```tsx
     * import { CoreProviders, NoSsr, Typography } from "@react-md/core";
     * import type { ReactElement } from "react";
     *
     * function Example(): ReactElement {
     *   return (
     *     <>
     *       <Typography>This is always rendered.</Typography>
     *       <NoSsr>
     *         <Typography>
     *           This is only rendered client-side after rehydrating.
     *         </Typography>
     *       </NoSsr>
     *     </>
     *   );
     * }
     *
     * function App(): ReactElement {
     *   return (
     *     <CoreProviders ssr>
     *       <Example />
     *     </CoreProviders>
     *   );
     * }
     * ```
     *
     * @remarks \@since 6.0.0
     */
    export function NoSsr(props: NoSsrProps): ReactElement {
      const { children } = props;
      const ssr = useSsr();
      const [rendered, setRendered] = useState(!ssr);
      useEffect(() => {
        setRendered(true);
      }, []);

      return <>{rendered && children}</>;
    }