useCopyToClipboard

Wraps the Clipboard API with a built-in timeout to reset the copied state — useful for copy buttons that show brief confirmation feedback. Powers Copy Button.

Last updated August 12, 2026

CreditsUnchangedPublished

Copied from coss ui.

Overview

Installation

$ npx shadcn@latest add https://ui.persian-labs.ir/r/use-copy-to-clipboard.json

Usage

import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
 
function CopyButton({ text }: { text: string }) {
  const { copyToClipboard, isCopied } = useCopyToClipboard()
 
  return (
    <button onClick={() => copyToClipboard(text)}>
      {isCopied ? "Copied!" : "Copy"}
    </button>
  )
}

Examples

Custom timeout

The isCopied state resets after 2 seconds by default. Set timeout to 0 to keep it true indefinitely (until the component unmounts).

Callback on copy

Run a side effect when a copy succeeds with onCopy.

RTL

API Reference

useCopyToClipboard(options)

Prop	Type	Default	Description
timeout	number	2000	Milliseconds before isCopied resets to false. Set to 0 to keep it true.
onCopy	() => void	—	Callback fired after a successful copy.

Return value

Prop	Type	Default	Description
copyToClipboard	(value: string) => void	—	Call with the text to copy. No-op if value is empty or the clipboard API is unavailable.
isCopied	boolean	—	true for timeout ms after a successful copy, then resets.

Edit this page on GitHub

PrevioususeControllableState NextuseCountdown