Custom React hook for effortless text copying to clipboard! It handles copy status with a customizable timer and error management.

use-copy-to-clipboard.ts

import { useCallback, useState } from "react";

// Custom hook to copy text to clipboard
const useCopyToClipboard = (timeoutDuration: number = 1000) => {
  const [copied, setCopied] = useState(false);
  const [error, setError] = useState<Error | null>(null);

  const copyToClipboard = useCallback(
    async (text: string) => {
      try {
        await navigator.clipboard.writeText(text);
        setCopied(true);
        setError(null);
        setTimeout(() => setCopied(false), timeoutDuration);
      } catch (err) {
        setError(err instanceof Error ? err : new Error("Failed to copy text"));
      }
    },
    [timeoutDuration]
  );

  return { copied, error, copyToClipboard };
};

export default useCopyToClipboard;