# All files / src/link Link.tsx

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

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
    921x
    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
    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
    21x
    21x
    21x
    21x
    21x
    21x
    21x
    21x
    1x
     import {
      forwardRef,
      type AnchorHTMLAttributes,
      type ForwardRefExoticComponent,
    } from "react";
    import { link, type LinkClassNameOptions } from "./styles.js";

    declare module "react" {
      interface CSSProperties {
        "--rmd-link-color"?: string;
        "--rmd-link-visited-color"?: string;
        "--rmd-link-hover-color"?: string;
      }
    }

    /**
     * @remarks \@since 6.0.0
     */
    export type CustomLinkComponent =
      | ForwardRefExoticComponent<{ href: string }>
      | ForwardRefExoticComponent<{ to: string }>
      | "a";

    /**
     * @remarks
     * \@since 6.0.0 Removed the `preventMaliciousTarget` prop since browsers
     * default to `rel=noopener` after updating the {@link https://github.com/whatwg/html/issues/4078|spec}.
     * \@since 6.0.0 Removed the `component` prop since all you need for link
     * behavior is `className="rmd-link"`.
     * \@since 6.0.0 The `href` prop is required.
     * \@since 6.0.0 Removed the `flexCentered` prop since it is now the default
     * styles.
     */
    export interface LinkProps
      extends AnchorHTMLAttributes<HTMLAnchorElement>,
        LinkClassNameOptions {
      /**
       * All links **must** have a valid href.
       */
      href: string;

      /**
       * Set this to `true` if your link contains icons that should be centered and
       * spaced with additional text. This is not used by default so that links can
       * correctly line wrap while rendered within paragraphs of text.
       *
       * @defaultValue `false`
       */
      flex?: boolean;
    }

    /**
     * **Server Component**
     *
     * @example
     * Simple Example
     * ```tsx
     * import { Link, Typography } from "@react-md/core";
     * import type { ReactElement } from "react";
     *
     * function Element(): ReactElement {
     *   return (
     *     <Typography>
     *       Here is a paragraph of text with a {" "}
     *       <Link href="/some-url">link to some content</Link>.
     *     </Typography>
     *   );
     * }
     * ```
     *
     *
     * @remarks
     * \@since 6.0.0 Removed the `preventMaliciousTarget` prop since browsers
     * default to `rel=noopener` after updating the {@link https://github.com/whatwg/html/issues/4078|spec}.
     * \@since 6.0.0 Removed the `component` prop since all you need for link
     * behavior is `className="rmd-link"`.
     * \@since 6.0.0 The `href` prop is required.
     * \@since 6.0.0 Removed the `flexCentered` prop since it is now the default
     * styles.
     */
    export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
      function Link(props, ref) {
        const { className, flex, children, ...remaining } = props;

        return (
          <a {...remaining} ref={ref} className={link({ flex, className })}>
            {children}
          </a>
        );
      }
    );