# All files / divider Divider.tsx

100% Statements 65/65
50% Branches 1/2
100% Functions 1/1
100% Lines 65/65

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
    661x
    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
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    1x
     import { forwardRef, type ElementType, type HTMLAttributes } from "react";
    import { divider, type DividerClassNameOptions } from "./styles.js";

    declare module "react" {
      interface CSSProperties {
        "--rmd-divider-size"?: string | number;
        "--rmd-divider-vertical-size"?: string | number;
        "--rmd-divider-color"?: string;
        "--rmd-divider-spacing"?: string | number;
        "--rmd-divider-vertical-spacing"?: string | number;
        "--rmd-divider-inset"?: string | number;
        "--rmd-divider-width"?: string | number;
        "--rmd-divider-max-size"?: string | number;
      }
    }

    export type DividerElement = HTMLHRElement | HTMLDivElement;

    /**
     * @remarks \@since 6.0.0 Extends the {@Link DividerClassNameOptions}
     */
    export interface DividerProps
      extends HTMLAttributes<DividerElement>,
        DividerClassNameOptions {}

    /**
     * **Server Component**
     *
     * @example
     * Simple Example
     * ```tsx
     * import { Divider } from "@react-md/core";
     * import type { ReactElement } from "react";
     *
     * function Example(): ReactElement {
     *   return  <Divider />;
     * }
     * ```
     */
    export const Divider = forwardRef<DividerElement, DividerProps>(
      function Divider(props, ref) {
        const {
          inset = false,
          vertical = false,
          role = "separator",
          className,
          ...remaining
        } = props;

        const Component = (vertical ? "div" : "hr") as ElementType;

        return (
          <Component
            {...remaining}
            ref={ref}
            role={role}
            className={divider({
              inset,
              vertical,
              className,
            })}
          />
        );
      }
    );