# All files RootHtml.tsx

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

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
    961x
    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
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
     import {
      type HTMLAttributes,
      type HtmlHTMLAttributes,
      type ReactElement,
      type ReactNode,
    } from "react";
    import { type PropsWithRef } from "./types.js";

    /**
     * @remarks \@since 6.0.0
     */
    export interface RootHtmlProps extends HtmlHTMLAttributes<HTMLHtmlElement> {
      /** @defaultValue `"ltr"` */
      dir?: string;

      /** @defaultValue `"en"` */
      lang?: string;

      /**
       * Any additional props to provide to the `<body>` element and also supports a
       * `ref` if that is required for some reason. Using a `ref` would make your
       * root layout a client component though.
       */
      bodyProps?: PropsWithRef<HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>;

      /**
       * Convenience prop to replace `bodyProps={{ className: "custom-class-name" }}`.
       */
      bodyClassName?: string;

      /**
       * Any content to render before the `<body>` tag. This can be useful if you
       * need to render a custom `<head>` element.
       */
      beforeBodyChildren?: ReactNode;

      /**
       * Any content to render after the `<body>` tag. This can be useful to insert
       * `<script>` tags for analytics or other external libraries.
       */
      afterBodyChildren?: ReactNode;
    }

    /**
     * **Server Component**
     *
     * This is mostly for creating the root html for next.js applications that
     * defaults to setting the `dir="ltr"` and `lang="en"`. Additional props can be
     * passed to the root `<html>` and `<body>` elements and children can be
     * rendered before and after the `<body>` if needed.
     *
     * @example
     * Simple Example
     * ```tsx
     * // src/app/layout.tsx
     * import { RootHtml } from "@react-md/core";
     * import { type ReactElement, type PropsWithChildren } from "react";
     * import { Roboto_Flex } from "next/font/google";
     *
     * const roboto = Roboto_Flex({
     *   subsets: ["latin"],
     *   variable: "--roboto",
     * });
     *
     * export default function RootLayout(props: PropsWithChildren): ReactElement {
     *   const { children } = props;
     *
     *   return <RootHtml className={roboto.variable}>{children}</RootHtml>;
     * }
     * ```
     *
     * @remarks \@since 6.0.0
     */
    export function RootHtml(props: RootHtmlProps): ReactElement {
      const {
        dir = "ltr",
        lang = "en",
        children,
        bodyProps,
        bodyClassName,
        beforeBodyChildren,
        afterBodyChildren,
        ...remaining
      } = props;

      return (
        <html dir={dir} lang={lang} {...remaining}>
          {beforeBodyChildren}
          <body {...bodyProps} className={bodyClassName || bodyProps?.className}>
            {children}
          </body>
          {afterBodyChildren}
        </html>
      );
    }