Skip to content

useCopy

React hook for clipboard copy

React
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 };
}