Craft Collection

Animated Link

Last updated: Sep 12, 2024

A link component with animation effect on hover. Set isInternal prop to true for internal routing (default: external link).

Prerequisites

Created in Next.js with TypeScript. Styled with TailwindCSS.

Note: <Link> can be replaced by <a>. If using <a>, change the component typing from LinkProps to React.AnchorHTMLAttributes<HTMLAnchorElement>.

Preview

Animated External Link

Animated Internal Link

Code

tsx

import Link, { LinkProps } from 'next/link';
import { LuArrowUpRight } from 'react-icons/lu';
 
type AnimatedLinkProps = LinkProps & {
  children: React.ReactNode;
  isInternal?: boolean;
};
 
export default function AnimatedLink({
  children,
  isInternal = false,
  ...props
}: AnimatedLinkProps) {
  return (
    <Link
      {...props}
      target={isInternal ? '_self' : '_blank'}
      className="group underline decoration-gray-400 underline-offset-4 transition-colors hover:decoration-gray-700 dark:decoration-gray-600 dark:hover:decoration-gray-300"
    >
      {children}
      {!isInternal && (
        <LuArrowUpRight
          className="inline-block text-gray-400 transition-all group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300"
          size={16}
        />
      )}
    </Link>
  );
}

Inspired by Jérémy Caruelle