---
title: useCopyToClipboard
description: Copy text to the clipboard and track a transient "copied" state for feedback.
icon: clipboard-copy
---

### Installation

```package-install
npx 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

```tsx showLineNumbers
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.          |