UseCopyToClipboard

1'use client';
2 
3import { useCallback, useEffect, useRef, useState } from 'react';
4 
5type UseCopyToClipboardReturn = {
6  copied: boolean;
7  copy: (text: string) => Promise<boolean>;
8};
9 
10// Fallback to old browsers
11function fallbackCopy(str: string): boolean {
12  const textarea = document.createElement('textarea');
13  let success = false;
14 
15  textarea.value = str;
16  textarea.setAttribute('readonly', '');
17 
18  textarea.style.position = 'absolute';
19  textarea.style.left = '-9999px';
20 
21  document.body.appendChild(textarea);
22 
23  textarea.select();
24 
25  try {
26    success = document.execCommand('copy');
27  } catch {
28    success = false;
29  } finally {
30    document.body.removeChild(textarea);
31  }
32 
33  return success;
34}
35 
36export function useCopyToClipboard(
37  duration: number = 1500,
38): UseCopyToClipboardReturn {
39  const [copied, setCopied] = useState<boolean>(false);
40  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
41 
42  const copy = useCallback(
43    async (text: string): Promise<boolean> => {
44      try {
45        let success = false;
46 
47        if (navigator.clipboard && navigator.clipboard.writeText) {
48          await navigator.clipboard.writeText(text);
49          success = true;
50        } else {
51          success = fallbackCopy(text);
52        }
53 
54        if (success) {
55          setCopied(true);
56          if (timeoutRef.current) clearTimeout(timeoutRef.current);
57          timeoutRef.current = setTimeout(() => setCopied(false), duration);
58          return true;
59        } else {
60          throw new Error('Copy command failed');
61        }
62      } catch (err: unknown) {
63        console.error('Failed to copy text: ', err);
64        return false;
65      }
66    },
67    [duration],
68  );
69 
70  useEffect(() => {
71    return () => {
72      if (timeoutRef.current) {
73        clearTimeout(timeoutRef.current);
74      }
75    };
76  }, []);
77 
78  return {
79    copied,
80    copy,
81  };
82}