useCopyToClipboard

Copy text to the clipboard and track a transient "copied" state for feedback.

Installation

npx shadcn@latest add @redpanda/use-copy-to-clipboard

pnpm dlx shadcn@latest add @redpanda/use-copy-to-clipboard

yarn dlx shadcn@latest add @redpanda/use-copy-to-clipboard

bunx shadcn@latest add @redpanda/use-copy-to-clipboard

nubx shadcn@latest add @redpanda/use-copy-to-clipboard

aube dlx shadcn@latest add @redpanda/use-copy-to-clipboard

useCopyToClipboard writes a string to the clipboard via the async Clipboard API and flips an isCopied flag to true for a short window afterward — enough to swap a copy icon for a check. It no-ops safely during SSR and when the Clipboard API is unavailable.

Usage

import { Check, Copy } from "lucide-react";
import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
import { Button } from "@/components/redpanda-ui/button";

function CopyButton({ value }: { value: string }) {
  const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 });

  return (
    <Button variant="ghost" size="icon" onClick={() => copyToClipboard(value)}>
      {isCopied ? <Check /> : <Copy />}
    </Button>
  );
}

API

useCopyToClipboard({ timeout?, onCopy? })

Returns