# All files / src/form FormMessageCounter.tsx

83.05% Statements 49/59
100% Branches 0/0
0% Functions 0/1
83.05% Lines 49/59

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
    601x
    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

     import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
    import { formMessageCounter } from "./formMessageStyles.js";

    /** @remarks \@since 2.9.0 */
    export interface FormMessageCounterProps
      extends HTMLAttributes<HTMLSpanElement> {
      /**
       * The children to display in the counter. This is normally a string like:
       *
       * @example
       * String Example
       * ```ts
       * `${min} / ${max}`
       * ```
       */
      children: ReactNode;
    }

    /**
     * **Server Component**
     *
     * This component can be used to create a "counter" within the
     * {@link FormMessage} component.
     *
     * Note: This is really only useful when using the {@link FormMessage} component
     * without a {@link TextField}.
     *
     * @example
     * Example Usage
     * ```ts
     * interface ExampleProps {
     *   min: number;
     *   max: number;
     * }
     *
     * function Example({ min, max }: ExampleProps) {
     *   return (
     *     <FormMessage disableWrap>
     *       <FormMessageCounter>
     *         {`${min} / ${max}`}
     *       </FormMessageCounter>
     *     </FormMessage>
     *   );
     * }
     * ```
     *
     * @remarks \@since 2.9.0
     */
    export function FormMessageCounter(
      props: FormMessageCounterProps
    ): ReactElement {
      const { children, className, ...remaining } = props;

      return (
        <span {...remaining} className={formMessageCounter({ className })}>
          {children}
        </span>
      );
    }