# All files / src/divider VerticalDivider.tsx

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

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
    511x
    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
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    1x
     import { forwardRef, type HTMLAttributes } from "react";
    import { Divider } from "./Divider.js";
    import {
      useVerticalDividerHeight,
      type VerticalDividerHookOptions,
    } from "./useVerticalDividerHeight.js";

    export interface VerticalDividerProps extends HTMLAttributes<HTMLDivElement> {
      /**
       * @see {@link VerticalDividerHookOptions.maxHeight}
       * @defaultValue `1`
       */
      maxHeight?: VerticalDividerHookOptions<HTMLDivElement>["maxHeight"];
    }

    /**
     * **Client Component**
     *
     * This component is used to create a vertical divider based on a parent
     * element's height. This is really only needed when the parent element **has no
     * defined height**.  If there is a defined height, this component is not worth
     * much as the height can be computed in css as normal. This really just fixes
     * the issue that the height would be set to `auto` (which computes to 0 most of
     * the time) when it is not set on a parent element.
     *
     * @example
     * Server Component Implementation
     * ```tsx
     * import type { ReactElement } from "react";
     * import { Divider } from "@react-md/core";
     *
     * function Example(): ReactElement {
     *   // or use a custom className
     *   return <Divider vertical style={{ height: "80%" }} />;
     * }
     * ```
     */
    export const VerticalDivider = forwardRef<HTMLDivElement, VerticalDividerProps>(
      function VerticalDivider(props, ref) {
        const { style, maxHeight = 1, ...remaining } = props;

        const heightProps = useVerticalDividerHeight({
          ref,
          style,
          maxHeight,
        });

        return <Divider {...remaining} {...heightProps} vertical />;
      }
    );