useCopy

A simple TypeScript hook for copying text to the clipboard with a timeout

useCopy.tsx
import React from 'react';

type Timeout = ReturnType<typeof setTimeout>;

export function useCopy(string: string, copyTimeout: number = 3000) {
  const [isCopied, setIsCopied] = React.useState(false);
  const timeout = React.useRef<Timeout | null>(null);

  // clear timeout on unmount
  React.useEffect(() => {
    return () => {
      if (timeout.current) {
        clearTimeout(timeout.current);
      }
    };
  }, []);

  const copy = React.useCallback(() => {
    if (timeout.current) {
      clearTimeout(timeout.current);
    }
    navigator.clipboard.writeText(string);
    setIsCopied(true);
    timeout.current = setTimeout(() => {
      setIsCopied(false);
    }, copyTimeout);
  }, [string, copyTimeout]);

  return { isCopied, copy };
}

See all snippets