Utilitieshook

useCopyToClipboard

Clipboard write with copied/error status that resets.

Installation

$npx shadcn@latest add @particular/use-copy-to-clipboard

Source

hooks/use-copy-to-clipboard.ts

"use client"

import * as React from "react"

export type CopyStatus = "idle" | "copied" | "error"

export function useCopyToClipboard({ resetAfter = 2000 }: { resetAfter?: number } = {}) {
  const [status, setStatus] = React.useState<CopyStatus>("idle")
  const timer = React.useRef<ReturnType<typeof setTimeout>>(undefined)

  React.useEffect(() => () => clearTimeout(timer.current), [])

  const copy = React.useCallback(
    async (value: string) => {
      clearTimeout(timer.current)
      try {
        await navigator.clipboard.writeText(value)
        setStatus("copied")
        return true
      } catch (error) {
        console.error("Copy to clipboard failed", error)
        setStatus("error")
        return false
      } finally {
        timer.current = setTimeout(() => setStatus("idle"), resetAfter)
      }
    },
    [resetAfter]
  )

  return { status, copy }
}