@primer/react/dist/Link/Link.js

An implementation of GitHub's Primer Design System using React

import { clsx } from 'clsx';
import React, { useEffect } from 'react';
import classes from './Link.module.css.js';
import { fixedForwardRef } from '../utils/modern-polymorphic.js';
import { jsx } from 'react/jsx-runtime';
import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';

const UnwrappedLink = (props, ref) => {
  const {
    as: Component = 'a',
    className,
    inline,
    hoverColor,
    ...restProps
  } = props;
  const innerRef = React.useRef(null);
  useRefObjectAsForwardedRef(ref, innerRef);
  if (process.env.NODE_ENV !== "production") {
    /**
     * The Linter yells because it thinks this conditionally calls an effect,
     * but since this is a compile-time flag and not a runtime conditional
     * this is safe, and ensures the entire effect is kept out of prod builds
     * shaving precious bytes from the output, and avoiding mounting a noop effect
     */
    // eslint-disable-next-line react-hooks/rules-of-hooks
    useEffect(() => {
      if (innerRef.current && !(innerRef.current instanceof HTMLButtonElement) && !(innerRef.current instanceof HTMLAnchorElement)) {
        // eslint-disable-next-line no-console
        console.error('Error: Found `Link` component that renders an inaccessible element', innerRef.current, 'Please ensure `Link` always renders as <a> or <button>');
      }
    }, [innerRef]);
  }
  return /*#__PURE__*/jsx(Component, {
    className: clsx(className, classes.Link),
    "data-muted": restProps.muted,
    "data-inline": inline,
    "data-hover-color": hoverColor,
    ...restProps,
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    ref: innerRef
  });
};
UnwrappedLink.displayName = "UnwrappedLink";
const LinkComponent = fixedForwardRef(UnwrappedLink);
const Link = Object.assign(LinkComponent, {
  displayName: 'Link'
});

export { UnwrappedLink, Link as default };