40 lines
961 B
TypeScript
40 lines
961 B
TypeScript
import React, { HTMLAttributes, MouseEventHandler, useState } from 'react'
|
|
|
|
const TIMEOUT = 3000
|
|
|
|
export interface CopyToClipboardButtonProps extends HTMLAttributes<HTMLAnchorElement> {
|
|
text: string
|
|
copyIcon?: string
|
|
successIcon?: string
|
|
timeout?: number
|
|
}
|
|
|
|
export const CopyToClipboardButton: React.FC<CopyToClipboardButtonProps> = ({
|
|
text,
|
|
copyIcon = 'clipboard',
|
|
successIcon = 'yes',
|
|
...props
|
|
}) => {
|
|
const [isSuccess, setIsSuccess] = useState(false)
|
|
|
|
const clickHandler: MouseEventHandler<HTMLAnchorElement> = event => {
|
|
event.preventDefault()
|
|
|
|
window.navigator.clipboard?.writeText(text)
|
|
.then(() => {
|
|
setIsSuccess(true)
|
|
setTimeout(() => setIsSuccess(false), TIMEOUT)
|
|
})
|
|
.catch(error => console.error(error))
|
|
}
|
|
|
|
return window.navigator.clipboard ?
|
|
<a
|
|
href="#"
|
|
className={`code-snippets-copy-text dashicons dashicons-${isSuccess ? successIcon : copyIcon}`}
|
|
onClick={clickHandler}
|
|
{...props}
|
|
></a> :
|
|
null
|
|
}
|