Clipboard Copy Libraries in JavaScript: A Deep Technical Comparison

Copying text to the clipboard is a common feature in web apps — from sharing links to copying code snippets. While the modern navigator.clipboard.writeText() API works well in secure contexts, legacy browser support and complex use cases (like copying rich content or handling fallbacks) often require a dedicated library. The five packages under review — clipboard-polyfill, copy-to-clipboard, react-clipboard.js, react-copy-to-clipboard, and use-clipboard-copy — each approach this problem differently. Let’s examine their technical trade-offs.

🧰 Core Capabilities: What Each Library Actually Does

clipboard-polyfill

This package provides a standards-compliant polyfill for the Clipboard API. It implements writeText(), readText(), and even supports writing rich content like HTML or images via write(). Crucially, it detects native support and only falls back to legacy methods (like document.execCommand) when needed.

import { writeText } from 'clipboard-polyfill';

// Works in all browsers, uses native API where available
await writeText('Hello, world!');

It also ships with optional modules (clipboard-polyfill/text, clipboard-polyfill/overwrite-globals) for fine-grained control over bundle size and global pollution.

copy-to-clipboard

A minimal, zero-dependency utility focused solely on copying plain text. It uses navigator.clipboard.writeText() when available and gracefully degrades to execCommand in older environments. Unlike clipboard-polyfill, it does not expose read operations or rich content support.

import copy from 'copy-to-clipboard';

// Returns boolean indicating success
const success = copy('Hello, world!');

It offers basic configuration like specifying a temporary DOM element for the fallback path:

copy('text', { target: document.body });

react-clipboard.js

This is a React wrapper around the original clipboard.js (a popular vanilla JS library by Zeno Rocha). It requires you to attach a data-clipboard-text attribute to a DOM element and then initialize the clipboard behavior via a React hook or component.

import { useClipboard } from 'react-clipboard.js';

function MyComponent() {
  const { copied, copy } = useClipboard();
  return (
    <button data-clipboard-text="Hello, world!" onClick={copy}>
      {copied ? 'Copied!' : 'Copy'}
    </button>
  );
}

Note: This library depends on the underlying clipboard.js, which manipulates the DOM directly and requires a real DOM node with specific attributes.

react-copy-to-clipboard

A straightforward React component that wraps copy-to-clipboard. It provides a render-prop-style API or a simple component that triggers copy on click.

import { CopyToClipboard } from 'react-copy-to-clipboard';

function App() {
  return (
    <CopyToClipboard text="Hello, world!">
      <button>Copy</button>
    </CopyToClipboard>
  );
}

It passes through an onCopy callback with success status:

<CopyToClipboard text="text" onCopy={(text, result) => console.log(result)}>
  <button>Copy</button>
</CopyToClipboard>

use-clipboard-copy

A custom React hook that encapsulates clipboard logic using copy-to-clipboard under the hood. It returns state (value, success) and an action (copy). Designed for composition rather than wrapping JSX.

import useClipboard from 'use-clipboard-copy';

function App() {
  const clipboard = useClipboard();
  return (
    <div>
      <input value={clipboard.value} onChange={e => clipboard.copy(e.target.value)} />
      {clipboard.success && <span>Copied!</span>}
    </div>
  );
}

It also supports options like timeout to auto-reset the success state:

const clipboard = useClipboard({ timeout: 1000 });

⚙️ Technical Trade-offs: Polyfill vs Utility vs React Abstraction

Browser Support Strategy

• clipboard-polyfill aims for full spec compliance. It handles edge cases like Safari’s clipboard permission model and iOS quirks more robustly because it’s built as a true polyfill.
• copy-to-clipboard, react-copy-to-clipboard, and use-clipboard-copy use a simpler fallback strategy: try navigator.clipboard.writeText(), else use execCommand. They may fail silently in some older or restricted environments.
• react-clipboard.js inherits the behavior of clipboard.js, which relies entirely on execCommand and does not use the modern Clipboard API at all. This means it won’t benefit from async/await patterns or proper error handling in modern browsers.

Error Handling and Feedback

• clipboard-polyfill throws standard DOMExceptions (e.g., NotAllowedError) that you must catch:

try {
  await writeText('text');
} catch (err) {
  console.error('Copy failed:', err.name);
}

• copy-to-clipboard returns false on failure but doesn’t explain why:

if (!copy('text')) {
  alert('Copy failed — please try manually');
}

• react-copy-to-clipboard passes the boolean result to onCopy, same as above.
• use-clipboard-copy only tracks success/failure state, not the cause.
• react-clipboard.js provides no programmatic error feedback — you only get a copied boolean.

Bundle Impact and Dependencies

• clipboard-polyfill is modular. You can import only writeText to keep size minimal.
• copy-to-clipboard is tiny (~500 bytes minified) and has zero dependencies.
• react-clipboard.js pulls in the entire clipboard.js (~3KB), which includes DOM manipulation logic irrelevant in React.
• react-copy-to-clipboard and use-clipboard-copy both depend on copy-to-clipboard, so their overhead is minimal beyond the React integration layer.

Rich Content Support

Only clipboard-polyfill supports copying HTML or images via the write() method:

import { write } from 'clipboard-polyfill';

const dt = new DataTransfer();
dt.items.add('Formatted text', 'text/html');
dt.items.add('Plain text', 'text/plain');
write(dt);

All other packages are text-only.

🧪 Real-World Usage Scenarios

Scenario 1: Simple “Copy Link” Button in a React App

You just need to copy a URL string on button click, with visual feedback.

• ✅ Best choice: use-clipboard-copy or react-copy-to-clipboard
• Why? Minimal setup, built-in success state, and idiomatic React patterns.

// With use-clipboard-copy
const clipboard = useClipboard({ timeout: 1500 });
return (
  <button onClick={() => clipboard.copy(url)}>
    {clipboard.success ? 'Copied!' : 'Copy link'}
  </button>
);

Scenario 2: Copying Code Snippets with Syntax Highlighting (HTML)

You want to preserve formatting when users paste into Word or email.

• ✅ Best choice: clipboard-polyfill
• Why? Only it supports writing multiple MIME types (HTML + plain text fallback).

const html = '<code class="language-js">console.log("hello")</code>';
const text = 'console.log("hello")';
const dt = new DataTransfer();
dt.items.add(html, 'text/html');
dt.items.add(text, 'text/plain');
await write(dt);

Scenario 3: Legacy Enterprise App Supporting IE11

Your app must run in old browsers without async/await support.

• ✅ Best choice: copy-to-clipboard (used synchronously)
• Why? It works in IE11 via execCommand, and doesn’t rely on Promises.

// Synchronous fallback
var success = copy('text');
if (!success) {
  // Fallback to manual instructions
}

Note: clipboard-polyfill dropped IE11 support in v4+. Use v3 if you must support it.

Scenario 4: Complex UI with Dynamic Copy Targets

You have a table where each row has a “copy” button for its ID, and you don’t want to wrap every button in a component.

• ✅ Best choice: copy-to-clipboard (direct import)
• Why? Lightweight function call avoids unnecessary React wrappers.

function Row({ id }) {
  const handleCopy = () => {
    if (copy(id)) {
      showToast('Copied!');
    }
  };
  return <button onClick={handleCopy}>Copy ID</button>;
}

⚠️ Deprecated or Problematic Packages?

As of 2024:

• react-clipboard.js is effectively deprecated. Its underlying dependency, clipboard.js, is in maintenance mode and hasn’t been updated since 2020. More critically, it doesn’t use the modern Clipboard API, relying solely on the obsolete execCommand method. Avoid in new projects.
• All other packages (clipboard-polyfill, copy-to-clipboard, react-copy-to-clipboard, use-clipboard-copy) are actively maintained and compatible with current browsers.

📊 Summary Table

💡 Final Guidance

• Need maximum compatibility and future-proofing? → Use clipboard-polyfill.
• Building a React app and just need to copy text? → Reach for use-clipboard-copy (hook) or react-copy-to-clipboard (component).
• Working outside React or want minimal footprint? → Use copy-to-clipboard directly.
• Avoid react-clipboard.js — it’s outdated and doesn’t leverage modern browser capabilities.

Choose based on whether you need rich content support, how much you care about error diagnostics, and whether you’re in a React context. For most modern web apps, clipboard-polyfill or use-clipboard-copy will serve you best.