Create New Item
Item Type
File
Folder
Item Name
Search file in folder and subfolders...
Are you sure want to rename?
File Manager
/
wp-content
/
plugins
/
code-snippets
/
js
/
common
:
CopyToClipboardButton.tsx
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
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 }