use-clipboard

1import { useEffect, useMemo, useRef, useState } from 'react'
2import { useEventListener } from '@/registry/hooks/use-event-listener'
3import { useMemoizedFn } from '@/registry/hooks/use-memoized-fn'
4import { useUnmount } from '@/registry/hooks/use-unmount'
5import { isBrowser } from '@/registry/lib/is-browser'
6 
7export interface UseClipboardOptions {
8  /**
9   * Enabled reading for clipboard
10   *
11   * @default false
12   */
13  read?: boolean
14 
15  /**
16   * Copy source
17   */
18  source?: string
19 
20  /**
21   * Milliseconds to reset state of `copied` ref
22   *
23   * @default 1500
24   */
25  copiedDuring?: number
26 
27  /**
28   * Whether fallback to document.execCommand('copy') if clipboard is undefined.
29   *
30   * @default false
31   */
32  legacy?: boolean
33}
34 
35export interface UseClipboardReturn {
36  isSupported: boolean
37  text: string
38  copied: boolean
39  copy: (text?: string) => Promise<void>
40}
41 
42type PermissionState = 'granted' | 'denied' | 'prompt' | undefined
43 
44function isAllowed(status: PermissionState): boolean {
45  return status === 'granted' || status === 'prompt'
46}
47 
48function legacyCopy(value: string): void {
49  const ta = document.createElement('textarea')
50  ta.value = value
51  ta.style.position = 'absolute'
52  ta.style.opacity = '0'
53  ta.setAttribute('readonly', '')
54  document.body.appendChild(ta)
55  ta.select()
56  document.execCommand('copy')
57  ta.remove()
58}
59 
60function legacyRead(): string {
61  return document?.getSelection?.()?.toString() ?? ''
62}
63 
64/**
65 * Reactive Clipboard API.
66 *
67 * @param options - Configuration options
68 * @returns Clipboard state and methods
69 */
70export function useClipboard(
71  options: UseClipboardOptions = {},
72): UseClipboardReturn {
73  const { read = false, source, copiedDuring = 1500, legacy = false } = options
74 
75  const [text, setText] = useState<string>('')
76  const [copied, setCopied] = useState<boolean>(false)
77  const [permissionRead, setPermissionRead] =
78    useState<PermissionState>(undefined)
79  const [permissionWrite, setPermissionWrite] =
80    useState<PermissionState>(undefined)
81 
82  const timeoutRef = useRef<number | null>(null)
83 
84  const isClipboardApiSupported = useMemo(() => {
85    if (!isBrowser) return false
86    return 'clipboard' in navigator
87  }, [])
88 
89  const isSupported = useMemo(() => {
90    return isClipboardApiSupported || legacy
91  }, [isClipboardApiSupported, legacy])
92 
93  // Check permissions
94  useEffect(() => {
95    if (!isBrowser || !isClipboardApiSupported) return
96 
97    const checkPermissions = async () => {
98      try {
99// … truncated