use-copy-to-clipboard

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(duration = 1500): UseCopyToClipboardReturn {
37	const [copied, setCopied] = useState<boolean>(false);
38	const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
39 
40	const copy = useCallback(
41		async (text: string): Promise<boolean> => {
42			try {
43				let success = false;
44 
45				if (navigator.clipboard && navigator.clipboard.writeText) {
46					await navigator.clipboard.writeText(text);
47					success = true;
48				} else {
49					success = fallbackCopy(text);
50				}
51 
52				if (success) {
53					setCopied(true);
54					if (timeoutRef.current) clearTimeout(timeoutRef.current);
55					timeoutRef.current = setTimeout(() => setCopied(false), duration);
56					return true;
57				}
58				throw new Error("Copy command failed");
59			} catch (err: unknown) {
60				console.error("Failed to copy text: ", err);
61				return false;
62			}
63		},
64		[duration]
65	);
66 
67	useEffect(() => {
68		return () => {
69			if (timeoutRef.current) {
70				clearTimeout(timeoutRef.current);
71			}
72		};
73	}, []);
74 
75	return {
76		copied,
77		copy,
78	};
79}