Docs
useCopyToClipboard

Use the useCopyToClipboard hook to copy text to the clipboard and track whether the copy action was successful, with an optional delay to reset the copied state.

Clipboard API

Installation

pnpm dlx shadcn@latest add https://hookcn.ouassim.tech/r/use-copy-to-clipboard

Usage

import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
import { Button } from "@/components/ui/button"
 
export function Component() {
  const [copy, isCopied] = useCopyToClipboard()
 
  return (
    <Button
      onClick={() =>
        copy("hello world").then(() => console.info("Text copied!"))
      }
    >
      {isCopied ? "Text Copied" : "Click to copy"}
    </Button>
  )
}

API Reference

Parameters

NameTypeDescriptionDefault
delay?numberTime in milliseconds to reset isCopied.2000

Returns

The useCopyToClipboard hook returns a tuple with the following elements:

IndexTypeDescription
0(text: string) => Promise<boolean>Function to copy text to the clipboard.
1booleanIndicates if the last copy was successful, resetting after the delay.