React Component to Copy Value to Clipboard

copy-button.tsx

import { useCallback, useState } from 'react';

import { CheckIcon, CopyIcon } from 'lucide-react';

type Timeout = number | undefined;
type ClipboardProps = {
  value: string;
  onError?: (err: Error) => void;
} & React.HTMLAttributes<HTMLButtonElement>;

const CopyButton = ({ value, onError, onClick, ...rest }: ClipboardProps) => {
  const [buttonLabel, setButtonLabel] = useState(<CopyIcon className="text-muted-foreground h-4 w-4" />);
  let cancelToken: Timeout = 0;
  // Function to copy text to clipboard
  const copyToClipboard = useCallback(
    (ev: React.MouseEvent<HTMLButtonElement>) => {
      document.clearTimeout(cancelToken);
      navigator.clipboard
        .writeText(value)
        .then(() => {
          setButtonLabel(<CheckIcon className="text-muted-foreground h-4 w-4" />);
          cancelToken = document.setTimeout(() => {
            setButtonLabel(<CopyIcon className="text-muted-foreground h-4 w-4" />);
          }, 500);
          if (onClick) {
            onClick(ev);
          }
        })
        .catch((err) => {
          console.error(err);
          if (onError) {
            onError(err);
          }
        });
    },
    [value],
  );

  return (
    <button onClick={copyToClipboard} {...rest}>
      {buttonLabel}
    </button>
  );
};

export default CopyButton;