You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import type { ComponentProps, ReactElement } from 'react'
|
|
import { useCallback, useEffect, useState } from 'react'
|
|
import { CheckIcon } from './check'
|
|
import { CopyIcon } from './copy'
|
|
import { Button } from './button'
|
|
|
|
export const CopyToClipboard = ({
|
|
getValue,
|
|
...props
|
|
}: {
|
|
getValue: () => string
|
|
} & ComponentProps<'button'>): 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(getValue())
|
|
} catch {
|
|
console.error('Failed to copy!')
|
|
}
|
|
}, [getValue])
|
|
|
|
const IconToUse = isCopied ? CheckIcon : CopyIcon
|
|
|
|
return (
|
|
<Button onClick={handleClick} title="Copy code" tabIndex={0} {...props}>
|
|
<IconToUse className="nextra-copy-icon nx-pointer-events-none nx-h-4 nx-w-4" />
|
|
</Button>
|
|
)
|
|
}
|