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 | import { ExternalLinkIcon } from "@chakra-ui/icons";
import { forwardRef, Link, LinkProps } from "@chakra-ui/react";
import type { ReactNode } from "react";
import { useExternalLinkWarning } from "../../contexts/ExternalLinkWarning";
export interface ExternalLinkProps extends LinkProps {
/**
* Shows an external link icon. `true` by default
*/
hasIcon?: boolean;
/**
* Prompts the user to confirm leaving the site. `true` by default
*/
hasWarning?: boolean;
/**
* Adds the nofollow annotation to the anchor's rel attribute
*/
noFollow?: boolean;
/**
* Show a custom icon next to the link.
*/
rightIcon?: ReactNode;
}
export const ExternalLink = forwardRef<ExternalLinkProps, "a">(
(
{
children,
hasIcon = true,
hasWarning = true,
href,
onClick,
noFollow,
rightIcon,
...props
},
ref
) => {
const withPrompt = useExternalLinkWarning();
hasIcon = hasIcon || Boolean(rightIcon);
const icon = hasIcon
? rightIcon ?? <ExternalLinkIcon mb={1} ml={0} />
: null;
let rel = "noopener noreferrer";
if (hasWarning || noFollow) {
rel += " nofollow";
}
return (
<Link
color="link"
href={href}
isExternal
onClick={hasWarning ? withPrompt({ href, onClick }) : onClick}
ref={ref}
rel={rel}
{...props}
>
{children} {hasIcon && icon}
</Link>
);
}
);
ExternalLink.displayName = "ExternalLink";
|