Clipboard API Integration

Clipboard API Implementation on Website

Clipboard API replaces deprecated document.execCommand('copy'). Asynchronous, permission-based, supports not just text but images, HTML, custom data formats. Works via navigator.clipboard and requires Secure Context.

Basic Usage

Copy text — most common scenario:

async function copyToClipboard(text: string): Promise<void> {
  if (!navigator.clipboard) {
    // Fallback for HTTP context or old browsers
    const textarea = document.createElement('textarea')
    textarea.value = text
    textarea.style.cssText = 'position:fixed;opacity:0;pointer-events:none'
    document.body.appendChild(textarea)
    textarea.select()
    document.execCommand('copy')
    document.body.removeChild(textarea)
    return
  }

  await navigator.clipboard.writeText(text)
}

async function readFromClipboard(): Promise<string> {
  return navigator.clipboard.readText()
}

Permissions

Writing (writeText, write) doesn't require explicit permission — page in focus and action initiated by user. Reading (readText, read) requests clipboard-read via Permissions API:

async function checkClipboardPermission(): Promise<PermissionState> {
  const result = await navigator.permissions.query({
    name: 'clipboard-read' as PermissionName,
  })
  return result.state // 'granted' | 'denied' | 'prompt'
}

Working with Images

async function copyImageToClipboard(blob: Blob): Promise<void> {
  const item = new ClipboardItem({ [blob.type]: blob })
  await navigator.clipboard.write([item])
}

async function copyCanvasToClipboard(canvas: HTMLCanvasElement): Promise<void> {
  const blob = await new Promise<Blob>((resolve, reject) =>
    canvas.toBlob((b) => (b ? resolve(b) : reject(new Error('Conversion error'))), 'image/png')
  )
  await copyImageToClipboard(blob)
}

Read image from buffer:

async function pasteImage(): Promise<HTMLImageElement | null> {
  const items = await navigator.clipboard.read()
  for (const item of items) {
    const imageType = item.types.find((t) => t.startsWith('image/'))
    if (imageType) {
      const blob = await item.getType(imageType)
      const url = URL.createObjectURL(blob)
      const img = new Image()
      img.src = url
      img.onload = () => URL.revokeObjectURL(url)
      return img
    }
  }
  return null
}

React Hook with Feedback State

function useCopyToClipboard(resetDelay = 2000) {
  const [copied, setCopied] = useState(false)
  const timerRef = useRef<ReturnType<typeof setTimeout>>()

  const copy = useCallback(async (text: string) => {
    try {
      await copyToClipboard(text)
      setCopied(true)
      clearTimeout(timerRef.current)
      timerRef.current = setTimeout(() => setCopied(false), resetDelay)
    } catch {
      setCopied(false)
    }
  }, [resetDelay])

  useEffect(() => () => clearTimeout(timerRef.current), [])

  return { copy, copied }
}

// Component
function CopyButton({ text }: { text: string }) {
  const { copy, copied } = useCopyToClipboard()

  return (
    <button onClick={() => copy(text)}>
      {copied ? 'Copied!' : 'Copy'}
    </button>
  )
}

Document-Level Paste Event

Intercept paste for drag-and-drop editors and image uploaders:

document.addEventListener('paste', async (event: ClipboardEvent) => {
  const items = event.clipboardData?.items ?? []

  for (const item of Array.from(items)) {
    if (item.type.startsWith('image/')) {
      event.preventDefault()
      const file = item.getAsFile()
      if (file) await handleImagePaste(file)
    }
  }
})

What's Involved

Implement copy/paste utilities with fallback, React hook useCopyToClipboard, support text and images, visual feedback (icon, toast, tooltip). Optionally integrate with editor or file uploader.

Timeline: half a day.