useCopyToClipboard() — ui Function Reference

Architecture documentation for the useCopyToClipboard() function in use-copy-to-clipboard.ts from the ui codebase.

Function typescript DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ useCopyToClipboard() — ui Function Reference

Dependency Diagram

graph TD
  558efd87_2f8f_cef7_14c8_8528d307b568["useCopyToClipboard()"]
  8d9b5e0d_2937_a363_bdaa_71fa483f1696["use-copy-to-clipboard.ts"]
  558efd87_2f8f_cef7_14c8_8528d307b568 -->|defined in| 8d9b5e0d_2937_a363_bdaa_71fa483f1696
  style 558efd87_2f8f_cef7_14c8_8528d307b568 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/hooks/use-copy-to-clipboard.ts lines 5–37

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

  const copyToClipboard = (value: string) => {
    if (typeof window === "undefined" || !navigator.clipboard.writeText) {
      return
    }

    if (!value) return

    navigator.clipboard.writeText(value).then(() => {
      setIsCopied(true)

      if (onCopy) {
        onCopy()
      }

      if (timeout !== 0) {
        setTimeout(() => {
          setIsCopied(false)
        }, timeout)
      }
    }, console.error)
  }

  return { isCopied, copyToClipboard }
}