# All files / src useEnsuredId.ts

100% Statements 30/30
100% Branches 2/2
100% Functions 1/1
100% Lines 30/30

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
    311x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    3674x
    3674x
    3674x
    3674x
    3674x
    3674x
    3674x
     import { useId } from "react";

    /**
     * This hook is used to ensure that an `id` has been provided to a component
     * either through props or use the `useId` hook.
     *
     * @example
     * Simple Example
     * ```tsx
     * import type { HTMLAttributes, ReactElement } from "react";
     * import { useEnsuredId } from "@react-md/core";
     *
     * export function MaterialDesignComponent(props: HTMLAttributes<HTMLDivElement>): ReactElement {
     *   const id = useEnsuredId(props.id, "component-name");
     *
     *   return <div {...props} id={id} />;
     * }
     * ```
     *
     * @remarks \@since 6.0.0
     * @internal
     */
    export function useEnsuredId(
      propId: string | undefined,
      prefix: string
    ): string {
      const id = useId();

      return propId ?? `${prefix}-${id}`;
    }