registry:hook

useCopyToClipboard

A hook for copying text to the clipboard with a temporary copied state.

Rendered example

use-copy-to-clipboard()

Install

registry/hooks/use-copy-to-clipboard.ts

"use client"

import * as React from "react"

export function useCopyToClipboard({ timeout = 2000 }: { timeout?: number } = {}) {
  const [isCopied, setIsCopied] = React.useState(false)

  const copyToClipboard = React.useCallback(
    async (value: string) => {
      if (!(navigator?.clipboard && value)) return

      await navigator.clipboard.writeText(value)
      setIsCopied(true)

      setTimeout(() => setIsCopied(false), timeout)
    },
    [timeout],
  )

  return { isCopied, copyToClipboard }
}