useClipboard React hook in TypeScript

Add to a project

Requirements: React 19, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Usage

Import useClipboard from @/hooks/use-clipboard.

import { Check, Copy } from "lucide-react"
import { useClipboard } from "@/hooks/use-clipboard"

export function CopyIban({ iban }: { iban: string }) {
  const { copy, copied } = useClipboard()
  return (
    <button type="button" onClick={() => copy(iban)} aria-label={copied ? "Copied" : "Copy IBAN"}>
      {copied ? <Check /> : <Copy />}
    </button>
  )
}

API

• timeoutdefault 2000
  number

  How long copied stays true after a copy, in ms. 0 keeps it until reset() or the next copy.

• onCopy / onError
  (text: string) => void / (error: Error) => void

  Called after each copy; the latest callbacks are always used, so there is nothing to memoize.

• useClipboard
  (options?: { timeout?: number; onCopy?; onError? }) => { copy(source: string | (() => string | Promise<string>), options?: { html?: string }): Promise<boolean>; copied: boolean; error: Error | null; text: string | null; reset(): void }

  copy takes a string or a function read at click time (the latest form value, a link fetched on demand) and resolves true on success. Pass html to put a rich version next to the plain text.

Parts

FAQ

Used in

More React hooks and utilities