/
copy-to-clipboard.tsx
52 lines (46 loc) · 1.08 KB
/
copy-to-clipboard.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import React, {
ComponentProps,
ReactElement,
useCallback,
useEffect,
useState
} from 'react'
import { CheckIcon, CopyIcon } from '../icons'
import { Button } from './button'
export const CopyToClipboard = ({
value,
className
}: {
value: string
className?: string
}): ReactElement => {
const [isCopied, setCopied] = useState(false)
useEffect(() => {
if (!isCopied) return
const timerId = setTimeout(() => {
setCopied(false)
}, 2000)
return () => {
clearTimeout(timerId)
}
}, [isCopied])
const handleClick = useCallback<
NonNullable<ComponentProps<'button'>['onClick']>
>(async () => {
setCopied(true)
if (!navigator?.clipboard) {
console.error('Access to clipboard rejected!')
}
try {
await navigator.clipboard.writeText(JSON.parse(value))
} catch {
console.error('Failed to copy!')
}
}, [value])
const IconToUse = isCopied ? CheckIcon : CopyIcon
return (
<Button onClick={handleClick} className={className}>
<IconToUse className="pointer-events-none h-4 w-4" />
</Button>
)
}