typescriptbeginner

useClipboard Hook (Advanced)

Clipboard hook with read, write, and auto-reset of the copied state after a timeout.

typescriptPress ⌘/Ctrl + Shift + C to copy

import { useState, useCallback, useRef } from 'react';

export function useClipboard(resetDelay = 2000) {
  const [copied, setCopied] = useState(false);
  const timerRef = useRef<ReturnType<typeof setTimeout>>();

  const copy = useCallback(async (text: string) => {
    try {
      await navigator.clipboard.writeText(text);
      setCopied(true);
      if (timerRef.current) clearTimeout(timerRef.current);
      timerRef.current = setTimeout(() => setCopied(false), resetDelay);
      return true;
    } catch {
      setCopied(false);
      return false;
    }
  }, [resetDelay]);

  const read = useCallback(async () => {
    try {
      return await navigator.clipboard.readText();
    } catch {
      return null;
    }
  }, []);

  return { copy, read, copied };
}