Function Link

starters/hooks/src/Link.tsx:14–34

(props: LinkProps)

}

export function Link(props: LinkProps) {
  let ref = useRef<HTMLAnchorElement>(null);
  let {linkProps, isPressed} = useLink(props, ref);
  let {hoverProps, isHovered} = useHover(props);
  let {focusProps, isFocusVisible} = useFocusRing();

  return (
    <a
      {...mergeProps(linkProps, hoverProps, focusProps)}
      ref={ref}
      href={props.href}
      target={props.target}
      className="react-aria-Link"
      data-hovered={isHovered || undefined}
      data-pressed={isPressed || undefined}
      data-focus-visible={isFocusVisible || undefined}
      data-disabled={props.isDisabled || undefined}>
      {props.children}
    </a>
  );
}