Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProCopy text to the clipboard with a copied flag that resets after a delay, an error state and a fallback for pages where the Clipboard API is blocked.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it for copy buttons: code blocks, share links, API keys, order numbers, with feedback that the copy worked.
Do not use it to read the clipboard without a clear user action; browsers ask for permission and may refuse.
import { useClipboard } from "@/hooks/use-clipboard"const { copy, copied } = useClipboard({ timeout: 2000 })
<button onClick={() => copy(code)}>{copied ? "Copied" : "Copy"}</button>useClipboard(options?): { copy, paste, copied, error, supported }
| Option | Type | Default | Description |
|---|---|---|---|
timeout | number | 2000 | Milliseconds copied stays true. |
| Return | Description |
|---|---|
copy(text) | Async. Resolves true when copied. Falls back to a hidden textarea and execCommand("copy") if the Clipboard API is unavailable or denied. |
paste() | Async. Resolves the clipboard text, or null when reading is not allowed. |
copied | True for timeout ms after a successful copy. |
error | The last error, or null. |
supported | Whether any copy method exists in this browser. |
Give the button an accessible name and announce the result: change the label to "Copied" and wrap it in a polite live region, or use role="status". Do not rely on an icon change alone.
The hook ships with renderHook tests (use-clipboard.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.