Hooks
useCopyToClipboard
Copy text to the clipboard and track a transient "copied" state for feedback.
Installation
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? })
| Option | Type | Default | Description |
|---|---|---|---|
timeout | number | 2000 | Milliseconds before isCopied resets to false. |
onCopy | () => void | — | Called after a successful copy (e.g. to fire a toast). |
Returns
| Property | Type | Description |
|---|---|---|
isCopied | boolean | true for timeout ms after a successful copy. |
copyToClipboard | (value: string) => void | Copies value; ignores empty strings. |
Built by malinskibeniamin. The source code is available on GitHub.