useCopyToClipboard
Copy text to the clipboard with feedback state and toast notifications.
View source
Features
- Automatic clipboard copying with feedback
- Configurable timeout for reset state
- Toast notifications for success/error states
- Error handling with optional persistence
- Cleanup on unmount
use-copy-to-clipboard.ts
1'use client';2
3
4
5interface UseCopyToClipboardOptions {6 /** Timeout in milliseconds to reset the copied state. Defaults to 2000ms. */7 timeout?: number;8 /** Whether copying is enabled. Can be a boolean or a function that receives the current copied state. */9 enabled?: boolean | ((isCopied: boolean) => boolean);10 /** Message to display on successful copy. */11 successMessage?: string;12 /** Message to display on copy failure. Defaults to 'Failed to copy to clipboard'. */13 errorMessage?: string;14 /** Whether to persist the error state after timeout. Defaults to false. */15 persistError?: boolean;16 /** Whether to show toast notifications. Defaults to true. */17 showToast?: boolean;18}19
20/**21 * A hook to copy text to the clipboard with visual feedback.22 *23 * When the text is copied, `isCopied` is set to true for the timeout period.24 * If copied again before timeout expires, the timeout resets.25 *26 * @param text - The text to copy to the clipboard.27 * @param options - Configuration options for the copy behavior.28 *29 * @example30 * ```tsx31 * const { handleCopy, isCopied } = useCopyToClipboard('Hello, World!', {32 * successMessage: 'Copied!',33 * });34 *35 * return (36 * <button onClick={handleCopy}>37 * {isCopied ? 'Copied!' : 'Copy'}38 * </button>39 * );40 * ```41 */42function useCopyToClipboard(43 text: string,44 options: UseCopyToClipboardOptions = {},45) {46 const {47 timeout = 2000,48 enabled = true,49 successMessage,50 errorMessage = 'Failed to copy to clipboard',51 persistError = false,52 showToast = true,53 } = options;54
55 const [isCopied, setIsCopied] = useState(false);56 const [error, setError] = useState<string | null>(null);57 const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);58
59 const handleCopy = useCallback(async () => {60 if (typeof enabled === 'function' ? !enabled(isCopied) : !enabled) return;61
62 if (timeoutRef.current) {63 clearTimeout(timeoutRef.current);64 }65
66 setError(null);67
68 try {69 if (!navigator.clipboard) {70 throw new Error('Clipboard API not supported');71 }72
73 await navigator.clipboard.writeText(text);74
75 if (showToast && successMessage) {76 toastManager.add({77 title: successMessage,78 type: 'success',79 });80 }81
82 setIsCopied(true);83
84 timeoutRef.current = setTimeout(() => {85 setIsCopied(false);86 }, timeout);87
88 return true;89 } catch (err) {90 if (showToast) {91 toastManager.add({92 title: errorMessage,93 type: 'error',94 });95 }96
97 const errorMsg =98 err instanceof Error ? err.message : 'Failed to copy to clipboard';99 setError(errorMsg);100 setIsCopied(false);101
102 if (!persistError) {103 timeoutRef.current = setTimeout(() => {104 setError(null);105 }, timeout);106 }107
108 return false;109 }110 }, [111 text,112 timeout,113 successMessage,114 errorMessage,115 persistError,116 showToast,117 enabled,118 isCopied,119 ]);120
121 const reset = useCallback(() => {122 setIsCopied(false);123 setError(null);124 if (timeoutRef.current) {125 clearTimeout(timeoutRef.current);126 }127 }, []);128
129 useEffect(() => {130 return () => {131 reset();132 };133 }, [reset]);134
135 return {136 isCopied,137 error,138 handleCopy,139 reset,140 };141}142
143export { useCopyToClipboard, type UseCopyToClipboardOptions };