# All files / src/typography TextContainer.tsx

100% Statements 106/106
100% Branches 2/2
100% Functions 2/2
100% Lines 106/106

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
    1071x
    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
    4x
    4x
    4x
    4x
    4x
    4x
    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
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    1x
     import { cnb } from "cnbuilder";
    import { forwardRef, type HTMLAttributes } from "react";
    import { bem } from "../utils/bem.js";

    declare module "react" {
      interface CSSProperties {
        "--rmd-line-length"?: string | number;
        "--rmd-text-container-padding"?: string | number;
      }
    }

    const styles = bem("rmd-text-container");

    /**
     * @remarks \@since 6.0.0
     */
    export interface TextContainerClassNameOptions {
      /**
       * An optional className to merge with typography text container styles.
       */
      className?: string;
    }

    /**
     * @example
     * Simple Example
     * ```tsx
     * import { textContainer, Typography } from "@react-md/core";
     *
     * function Example() {
     *   return (
     *     <main className={textContainer()}>
     *       <Typography type="headline-1">Heading</Typography>
     *       <Typography>
     *         Pretend this is a giant paragraph of text that wraps multiple lines.
     *       </Typography>
     *       <Typography>
     *         Pretend this is another giant paragraph of text that wraps multiple
     *         lines.
     *       </Typography>
     *     </main>
     *   ):
     * }
     * ```
     *
     * @remarks \@since 6.0.0
     */
    export function textContainer(
      options: TextContainerClassNameOptions = {}
    ): string {
      const { className } = options;

      return cnb(styles(), className);
    }

    /**
     * @remarks \@since 6.0.0 Removed the `size` option since there is no longer a
     * different line-length for mobile and desktop.
     */
    export interface TextContainerProps
      extends HTMLAttributes<HTMLDivElement>,
        TextContainerClassNameOptions {}

    /**
     * **Server Component**
     *
     * This component should be used to render text based content with an
     * appropriate max line length to optimize legibility.
     *
     * @example
     * Simple Example
     * ```tsx
     * import { TextContainer, Typography } from "@react-md/core";
     *
     * function Example() {
     *   return (
     *     <TextContainer>
     *       <Typography type="headline-1">Heading</Typography>
     *       <Typography>
     *         Pretend this is a giant paragraph of text that wraps multiple lines.
     *       </Typography>
     *       <Typography>
     *         Pretend this is another giant paragraph of text that wraps multiple
     *         lines.
     *       </Typography>
     *     </TextContainer>
     *   );
     * }
     * ```
     *
     * @see {@link textContainer} If you only want to apply this class to an
     * element.
     * @remarks \@since 6.0.0 Removed the `size` option since there is no longer a
     * different line-length for mobile and desktop.
     */
    export const TextContainer = forwardRef<HTMLDivElement, TextContainerProps>(
      function TextContainer(props, ref) {
        const { className, children, ...remaining } = props;

        return (
          <div {...remaining} ref={ref} className={textContainer({ className })}>
            {children}
          </div>
        );
      }
    );