useCopyToClipboard

1// Thanks @ncdai
2
3"use client";
4
5import * as React from "react";
6
7export type CopyState = "idle" | "done" | "error";
8
9export type UseCopyToClipboardOptions = {
10  /** Called when the text is successfully copied. */
11  onCopySuccess?: (text: string) => void;
12  /** Called when the copy operation fails. */
13  onCopyError?: (error: Error) => void;
14  /** The delay in milliseconds before resetting the state to "idle". Defaults to 1500. */
15  resetDelay?: number;
16};
17
18export function useCopyToClipboard({
19  onCopySuccess,
20  onCopyError,
21  resetDelay = 1500,
22}: UseCopyToClipboardOptions = {}) {
23  const [state, setState] = React.useState<CopyState>("idle");
24  const resetTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(
25    null
26  );
27
28  const copy = React.useCallback(
29    async (text: string | (() => string)) => {
30      // Clear any pending reset
31      if (resetTimeoutRef.current) {
32        clearTimeout(resetTimeoutRef.current);
33      }
34
35      try {
36        const finalText = typeof text === "function" ? text() : text;
37        await navigator.clipboard.writeText(finalText);
38
39        setState("done");
40
41        onCopySuccess?.(finalText);
42      } catch (error) {
43        setState("error");
44
45        onCopyError?.(
46          error instanceof Error ? error : new Error("Copy failed")
47        );
48      } finally {
49        // Schedule reset to idle
50        resetTimeoutRef.current = setTimeout(() => {
51          setState("idle");
52        }, resetDelay);
53      }
54    },
55    [onCopySuccess, onCopyError, resetDelay]
56  );
57
58  return { state, copy } as const;
59}