Copy Button

1"use client";
2 
3import * as React from "react";
4import { AnimatePresence, motion, useReducedMotion } from "motion/react";
5import { Check, Copy } from "lucide-react";
6 
7import { Button } from "@/components/ui/button";
8 
9const variants = {
10  hidden: { opacity: 0, scale: 0.5 },
11  visible: { opacity: 1, scale: 1 },
12};
13 
14type ButtonProps = React.ComponentPropsWithoutRef<typeof Button>;
15type ButtonClickEvent = Parameters<NonNullable<ButtonProps["onClick"]>>[0];
16 
17export type CopyButtonProps = Omit<
18  ButtonProps,
19  "children" | "value" | "onCopy"
20> & {
21  /** Text written to the clipboard when the button is pressed. */
22  value: string;
23  /** How long, in ms, the copied state is shown before reverting. */
24  timeout?: number;
25  /** Called with the copied value after a successful write. */
26  onCopy?: (value: string) => void;
27};
28 
29export function CopyButton({
30  value,
31  timeout = 1000,
32  onCopy,
33  onClick,
34  className,
35  variant = "outline",
36  size = "icon",
37  type = "button",
38  "aria-label": ariaLabel = "Copy to clipboard",
39  ...props
40}: CopyButtonProps) {
41  const [copied, setCopied] = React.useState(false);
42  const shouldReduceMotion = useReducedMotion();
43  const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
44 
45  React.useEffect(() => {
46    return () => {
47      if (timer.current) clearTimeout(timer.current);
48    };
49  }, []);
50 
51  const handleCopy = React.useCallback(
52    async (event: ButtonClickEvent) => {
53      onClick?.(event);
54 
55      if (event.defaultPrevented) return;
56 
57      try {
58        await navigator.clipboard.writeText(value);
59      } catch {
60        // Clipboard access can be denied (insecure context, no permission) —
61        // bail out without flipping into the copied state.
62        return;
63      }
64 
65      onCopy?.(value);
66      setCopied(true);
67 
68      if (timer.current) clearTimeout(timer.current);
69      timer.current = setTimeout(() => setCopied(false), timeout);
70    },
71    [onClick, onCopy, timeout, value],
72  );
73 
74  // An icon swap is a tiny state change, so keep it snappy: ease-out, well
75  // under 150ms. Motion is removed entirely under prefers-reduced-motion.
76  const transition = shouldReduceMotion
77    ? { duration: 0 }
78    : ({ duration: 0.13, ease: [0.215, 0.61, 0.355, 1] } as const);
79 
80  return (
81    <Button
82      type={type}
83      variant={variant}
84      size={size}
85      aria-label={ariaLabel}
86      data-copied={copied}
87      onClick={handleCopy}
88      className={className}
89      {...props}
90    >
91// … truncated