Component UI
useCopyToClipboardutilities

useCopyToClipboard

NewSSR SAFE

Copies text to clipboard with feedback.

$ pnpm dlx shadcn@latest add @byphongphan/use-copy-to-clipboard
Requires @byphongphan in components.json
utilities
Loading preview...

Installation

$ pnpm dlx shadcn@latest add @byphongphan/use-copy-to-clipboard
Requires @byphongphan in components.json

Usage

import { useCopyToClipboard } from "@/shared/hooks"
export function CopySnippet() {  const { isCopied, copy } = useCopyToClipboard({ timeout: 2000 })
  return (    <button onClick={() => copy("npm install @pp/hooks")}>      {isCopied ? "Copied to clipboard!" : "Copy Command"}    </button>  )}

Props & Parameters

ParamTypeDefaultDescription
options.timeoutnumber2000Duration in milliseconds before isCopied automatically resets to false.
options.onSuccess(text: string) => void—Callback invoked when text is successfully written to clipboard.
options.onError(error: unknown) => void—Callback invoked when writing to clipboard fails or is denied.

Returns

ReturnTypeDescription
isCopiedbooleanReactive boolean state indicating whether text was copied within the active timeout window.
copiedTextstring | nullThe most recently copied text string.
copy(text: string) => Promise<boolean>Async function that writes provided text to browser clipboard.
reset() => voidClears active timer and resets isCopied state back to idle immediately.

Command Palette

Quick search and commands navigation