Copying Text to Clipboard: A Practical Comparison of Popular npm Packages

Copying text to the clipboard is a common UI requirement — think “copy invite link” buttons or “copy code snippet” actions. But browser security rules make this tricky: you can’t just write to the clipboard whenever you want. You need either a user gesture (like a click) or permission via the modern Async Clipboard API. The packages clipboard-copy, copy-to-clipboard, ngclipboard, react-copy-to-clipboard, and vue-clipboard2 all aim to simplify this, but they do it in very different ways depending on your stack and needs.

🧰 Core Approach: Utility Function vs Framework Integration

clipboard-copy – Element-First, Zero Dependencies

This package takes a DOM element and copies its text content (or a custom value) using the best available method. It’s designed to be called inside event handlers.

// clipboard-copy
import copy from 'clipboard-copy';

document.getElementById('copy-btn').addEventListener('click', async () => {
  await copy('Hello, clipboard!');
  console.log('Copied!');
});

It also supports passing a DOM element whose .textContent will be copied:

const el = document.querySelector('#secret-code');
await copy(el); // Copies el.textContent

Under the hood, it tries the modern navigator.clipboard.writeText() first, falling back to document.execCommand('copy') in older browsers.

copy-to-clipboard – Promise-Based, No DOM Required

This is a pure function that takes a string and returns a promise. No element reference needed.

// copy-to-clipboard
import copy from 'copy-to-clipboard';

async function handleCopy() {
  try {
    await copy('https://example.com/share?token=abc123');
    alert('Link copied!');
  } catch (err) {
    console.error('Failed to copy', err);
  }
}

It uses the same fallback strategy as clipboard-copy but exposes a cleaner async interface. Great when your copy logic lives in a service or utility file, not tied to a specific button.

ngclipboard – Angular Directive (Deprecated Pattern)

This package provides an Angular directive that binds to a string value and triggers copy on click.

<!-- ngclipboard (Angular) -->
<button [ngClipboard]="'Text to copy'" (cbOnSuccess)="onCopied()">
  Copy
</button>

However, the repository hasn’t been updated for Angular Ivy or recent versions. It relies on Renderer2 and manual event binding, and there’s no official support for standalone components or signals. Given its inactive status, avoid in new Angular projects.

react-copy-to-clipboard – React Component with State Feedback

This wraps copy logic in a React component that manages success state for you.

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

function ShareButton() {
  const [copied, setCopied] = useState(false);

  return (
    <CopyToClipboard text="invite@example.com" onCopy={() => setCopied(true)}>
      <button>{copied ? 'Copied!' : 'Copy Email'}</button>
    </CopyToClipboard>
  );
}

It uses copy-to-clipboard under the hood but adds React-specific ergonomics. Note: it doesn’t use hooks internally (as of latest release), so it’s class-component friendly but slightly heavier than calling copy-to-clipboard directly in a useCallback.

vue-clipboard2 – Vue 2 Plugin with Directive

For Vue 2, this registers a global directive and a $copyText method.

// vue-clipboard2 (Vue 2)
// In main.js
import VueClipboard from 'vue-clipboard2';
Vue.use(VueClipboard);

Then in a component:

<template>
  <button v-clipboard:copy="text" v-clipboard:success="onCopy">Copy</button>
</template>

<script>
export default {
  data() {
    return { text: 'Hello from Vue!' };
  },
  methods: {
    onCopy() {
      this.$message('Copied!');
    }
  }
};
</script>

But this package does not work with Vue 3. The Vue 3 ecosystem has moved toward composable functions, and this plugin hasn’t adapted. For Vue 3, skip this and use copy-to-clipboard inside a @click handler.

⚠️ Maintenance and Compatibility Reality Check

• ngclipboard: Last published in 2018. No support for Angular 9+. Repository archived or inactive. Do not use in new projects.
• vue-clipboard2: Last update in 2020. Explicitly Vue 2 only. No Vue 3 compatibility. Avoid for Vue 3 apps.
• react-copy-to-clipboard: Actively maintained as of 2023, supports React 16–18, but doesn’t leverage modern hooks patterns.
• clipboard-copy and copy-to-clipboard: Both actively maintained, framework-agnostic, and support modern browsers with graceful fallbacks.

🔁 Fallback Strategy: How They Handle Older Browsers

All packages attempt to use navigator.clipboard.writeText() first (secure, async, requires HTTPS or localhost). If unavailable (e.g., Safari < 13.1, old Chrome), they fall back to the deprecated but widely supported document.execCommand('copy').

The fallback requires creating a temporary <textarea>, adding it to the DOM, selecting its content, and triggering execCommand. Both clipboard-copy and copy-to-clipboard handle this cleanly:

// Simplified fallback logic (used by both)
function fallbackCopyText(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  textarea.style.position = 'fixed';
  document.body.appendChild(textarea);
  textarea.select();
  try {
    return document.execCommand('copy');
  } finally {
    document.body.removeChild(textarea);
  }
}

Framework-specific packages inherit this behavior from their underlying utilities.

🛠️ When to Use What: Real Engineering Trade-offs

Use copy-to-clipboard if:

• You’re in a framework-agnostic environment (Svelte, Solid, vanilla JS).
• Your copy logic is decoupled from the DOM (e.g., triggered by a Redux action or service call).
• You want clean async/await syntax and don’t need automatic UI feedback.

Use clipboard-copy if:

• You already have a reference to a DOM element (e.g., in a web component or jQuery-style code).
• You want the smallest possible footprint with no extra abstractions.
• You’re building a design system or low-level utility library.

Use react-copy-to-clipboard if:

• You’re in a React app and want built-in success state without writing useState boilerplate.
• Your team prefers declarative components over imperative function calls.
• You’re okay with a small wrapper around copy-to-clipboard.

Avoid ngclipboard and vue-clipboard2 in new projects because:

• They’re tied to outdated framework versions.
• Maintenance is uncertain.
• Modern alternatives (native Clipboard API + lightweight utils) are more reliable.

💡 Pro Tip: In 2024, most apps can safely use the native navigator.clipboard.writeText() directly if you control your browser support matrix. Only reach for a package if you need IE11 or old Safari support — and even then, copy-to-clipboard is the safest bet.

✅ Final Recommendation

For new projects, default to copy-to-clipboard — it’s simple, well-maintained, and works everywhere. If you’re deep in React and love components, react-copy-to-clipboard is fine. But steer clear of ngclipboard and vue-clipboard2 unless you’re maintaining a legacy Angular or Vue 2 app with no upgrade path.

Remember: the clipboard is a user-facing feature. Always provide visual feedback (“Copied!”) and never copy without explicit user intent — browsers will block silent clipboard writes anyway.