Copying Text to Clipboard in Web Applications
clipboard-polyfill, copy-text-to-clipboard, copy-to-clipboard, react-copy-to-clipboard, and vue-clipboard2 are npm packages designed to simplify copying text to the user's clipboard across different browsers. They address inconsistencies in browser support for the modern navigator.clipboard API by providing unified interfaces, fallback mechanisms (like execCommand), and framework-specific integrations. These libraries handle cross-browser quirks, user gesture requirements, and permission models so developers can implement "copy" functionality reliably without writing low-level DOM manipulation code.
Npm Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Copying Text to Clipboard in Modern Web Apps: A Deep Technical Comparison
Copying text to the clipboard is a common requirement across web applications — from sharing links to exporting data. While the native navigator.clipboard API provides a clean interface, browser support and permission models vary. The packages clipboard-polyfill, copy-text-to-clipboard, copy-to-clipboard, react-copy-to-clipboard, and vue-clipboard2 each offer different approaches to abstract this complexity. Let’s examine their technical trade-offs in real-world scenarios.
🧩 Core Abstraction Strategy: Low-Level Polyfill vs High-Level Helpers
clipboard-polyfill focuses on providing a faithful polyfill for the standard navigator.clipboard.writeText() API. It emulates the modern API even in older browsers by falling back to legacy techniques like invisible <textarea> manipulation.
// clipboard-polyfill
import { writeText } from 'clipboard-polyfill';
await writeText('Hello, world!');
// Works like native navigator.clipboard.writeText(), even in IE11
copy-text-to-clipboard takes a minimal, promise-based approach that wraps the native API but doesn’t polyfill it. If the native API isn’t available, it throws an error.
// copy-text-to-clipboard
import copy from 'copy-text-to-clipboard';
const success = copy('Hello, world!');
// Returns boolean; no fallback for unsupported environments
copy-to-clipboard offers a hybrid strategy: it uses the modern API when available, but automatically falls back to the legacy execCommand('copy') method without requiring developer intervention.
// copy-to-clipboard
import copy from 'copy-to-clipboard';
const success = copy('Hello, world!');
// Tries navigator.clipboard first, then execCommand if needed
react-copy-to-clipboard is a React-specific wrapper around copy-to-clipboard. It exposes a render prop or component that handles copying on user interaction.
// react-copy-to-clipboard
import { CopyToClipboard } from 'react-copy-to-clipboard';
<CopyToClipboard text="Hello, world!" onCopy={() => console.log('copied')}>
<button>Copy</button>
</CopyToClipboard>
vue-clipboard2 is a Vue 2 plugin that registers a global directive (v-clipboard) and a programmatic method (this.$copyText). It internally uses clipboard-polyfill.
// vue-clipboard2 (Vue 2 only)
import Vue from 'vue';
import VueClipboard from 'vue-clipboard2';
Vue.use(VueClipboard);
// In component template:
// <button v-clipboard:copy="'Hello, world!'">Copy</button>
⚠️ Important:
vue-clipboard2is deprecated as of 2023 and only supports Vue 2. The author recommends migrating to@soerenmartius/vue3-clipboardfor Vue 3 projects. Do not usevue-clipboard2in new projects.
🔒 Permission and Security Model Handling
The modern navigator.clipboard API requires user activation (e.g., a click) and may prompt for permissions in some contexts. How each package deals with this varies:
clipboard-polyfillmimics the native behavior as closely as possible. In browsers that support the Permissions API, it will trigger prompts when needed. In older browsers, it silently usesexecCommandwithout prompts.copy-text-to-clipboarddelegates entirely to the native API, so it inherits all its permission requirements and potential rejections.copy-to-clipboardavoids permission issues in older browsers by usingexecCommand, which doesn’t require explicit permissions but only works during user-initiated events.react-copy-to-clipboardinherits the behavior ofcopy-to-clipboard, so it works reliably in click handlers without extra setup.vue-clipboard2inheritsclipboard-polyfill’s behavior, but its directive system ensures copying only happens on user-triggered events (like clicks), sidestepping most permission errors.
📱 Framework Integration: When Abstraction Adds Value
If you’re working in a framework, consider whether the added layer simplifies your code or just adds indirection.
For React, react-copy-to-clipboard reduces boilerplate:
// Without helper
<button onClick={() => {
copy('text');
setCopied(true);
}}>Copy</button>
// With react-copy-to-clipboard
<CopyToClipboard text="text" onCopy={() => setCopied(true)}>
<button>Copy</button>
</CopyToClipboard>
But note: it doesn’t support hooks natively (no useCopy), so many teams prefer calling copy-to-clipboard directly inside a custom hook.
For Vue, since vue-clipboard2 is deprecated and Vue 3 lacks an official successor, most developers now use copy-to-clipboard or clipboard-polyfill directly in methods:
// Vue 3 composition API
import copy from 'copy-to-clipboard';
const copyText = () => {
copy('Hello');
};
🛠️ Error Handling and Feedback
Reliable clipboard operations require checking success and handling failures gracefully.
-
clipboard-polyfillreturns a promise that rejects on failure (e.g., if the user denies permission).try { await writeText('text'); console.log('Success'); } catch (err) { console.error('Failed to copy', err); } -
copy-text-to-clipboardandcopy-to-clipboardreturn a boolean:if (copy('text')) { // success } else { // failed (e.g., not in user gesture context) } -
react-copy-to-clipboardpasses the boolean result toonCopy:<CopyToClipboard text="x" onCopy={(text, result) => { if (result) alert('Copied!'); }}> <button>Copy</button> </CopyToClipboard> -
vue-clipboard2emits events like@successand@error:<button v-clipboard:copy="text" @success="onCopySuccess"></button>
🌐 Browser Support Realities
- If you must support IE11 or old Android browsers,
clipboard-polyfillorcopy-to-clipboardare your only viable options. - If you target modern browsers only (Chrome 66+, Firefox 63+, Safari 13.1+),
copy-text-to-clipboardis sufficient and has zero fallback overhead. react-copy-to-clipboardandvue-clipboard2inherit the browser support of their underlying libraries.
📊 Decision Matrix
| Use Case | Recommended Package |
|---|---|
| Need IE11 support or maximum compatibility | clipboard-polyfill or copy-to-clipboard |
| Modern browsers only, minimal footprint | copy-text-to-clipboard |
| React app with simple copy buttons | react-copy-to-clipboard (or roll your own hook with copy-to-clipboard) |
| Vue 2 legacy project | vue-clipboard2 (but plan to migrate) |
| Vue 3 or framework-agnostic | copy-to-clipboard (best balance of size, compatibility, and simplicity) |
💡 Final Guidance
- Avoid
vue-clipboard2for new projects — it’s deprecated and Vue 2–only. - Prefer
copy-to-clipboardfor most general-purpose use cases: it’s tiny, handles fallbacks automatically, and returns clear success/failure feedback. - Use
clipboard-polyfillonly if you specifically need promise-based async/await syntax and full API compliance with the standardnavigator.clipboardinterface. - Skip
copy-text-to-clipboardunless you’re certain your users are on modern browsers and you want to avoid any legacy code paths. - In React, weigh whether
react-copy-to-clipboardsaves enough boilerplate to justify the dependency — often, a 5-line custom hook is cleaner.
How to Choose: react-copy-to-clipboard vs clipboard-polyfill vs copy-text-to-clipboard vs copy-to-clipboard vs vue-clipboard2
- react-copy-to-clipboard:
Choose
react-copy-to-clipboardif you're building a React application and prefer a declarative, component-based API for copy actions. It reduces boilerplate for simple use cases like copy buttons, but consider whether a lightweight custom hook usingcopy-to-clipboardmight offer more flexibility with less dependency overhead. - clipboard-polyfill:
Choose
clipboard-polyfillif you need a standards-compliant polyfill that closely mimics the nativenavigator.clipboard.writeText()API, including promise-based async/await usage, and must support very old browsers like IE11. It’s ideal when you want your code to look and behave like modern browser APIs regardless of the runtime environment. - copy-text-to-clipboard:
Choose
copy-text-to-clipboardif you're targeting only modern browsers (Chrome 66+, Firefox 63+, Safari 13.1+) and want the smallest possible dependency with zero fallback logic. It simply wraps the native API and returns a boolean, making it fast and predictable—but it will fail silently or throw in unsupported environments. - copy-to-clipboard:
Choose
copy-to-clipboardfor the best balance of compatibility, simplicity, and reliability in most projects. It automatically uses the modern API when available and falls back toexecCommandin older browsers, returning a clear success/failure boolean. It works well in both vanilla JS and framework-based apps without extra abstraction layers. - vue-clipboard2:
Do not choose
vue-clipboard2for new projects—it is officially deprecated and only supports Vue 2. If maintaining a legacy Vue 2 codebase, it provides directive-based copying viav-clipboard, but plan to migrate to a modern alternative likecopy-to-clipboardused directly in Vue methods or composables.
Popular Comparisons
README for react-copy-to-clipboard
react-copy-to-clipboard 
Copy to clipboard React component
Based on copy-to-clipboard
Would try to use execCommand with fallback to IE specific clipboardData interface and finally, fallback to simple prompt with proper text content & 'Copy to clipboard: Ctrl+C, Enter'
Installation
NPM
npm install --save react-copy-to-clipboard
Don't forget to manually install peer dependencies (react) if you use npm@3.
1998 Script Tag:
<script src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-copy-to-clipboard/build/react-copy-to-clipboard.js"></script>
(Module exposed as `CopyToClipboard`)
Live design system demo
Simple web demo
http://nkbt.github.io/react-copy-to-clipboard
Codepen demo
http://codepen.io/nkbt/pen/eNPoQv
Usage
import React from 'react';
import ReactDOM from 'react-dom';
import {CopyToClipboard} from 'react-copy-to-clipboard';
class App extends React.Component {
state = {
value: '',
copied: false,
};
render() {
return (
<div>
<input value={this.state.value}
onChange={({target: {value}}) => this.setState({value, copied: false})} />
<CopyToClipboard text={this.state.value}
onCopy={() => this.setState({copied: true})}>
<span>Copy to clipboard with span</span>
</CopyToClipboard>
<CopyToClipboard text={this.state.value}
onCopy={() => this.setState({copied: true})}>
<button>Copy to clipboard with button</button>
</CopyToClipboard>
{this.state.copied ? <span style={{color: 'red'}}>Copied.</span> : null}
</div>
);
}
}
const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);
Options
text: PropTypes.string.isRequired
Text to be copied to clipboard
onCopy: PropTypes.func
Optional callback, will be called when text is copied
onCopy(text, result)
result (bool): Returns true if copied successfully, else false.
options: PropTypes.shape({debug: bool, message: string})
Optional copy-to-clipboard options.
See API docs for details
children: PropTypes.node.isRequired
CopyToClipboard is a simple wrapping component, it does not render any tags, so it requires the only child element to be present, which will be used to capture clicks.
<CopyToClipboard text="Hello!">
<button>Copy to clipboard</button>
</CopyToClipboard>
Development and testing
Currently is being developed and tested with the latest stable Node 8 on OSX.
To run example covering all CopyToClipboard features, use yarn start, which will compile example/Example.js
git clone git@github.com:nkbt/react-copy-to-clipboard.git
cd react-copy-to-clipboard
yarn install
yarn start
# then
open http://localhost:8080
Tests
# to run ESLint check
yarn lint
# to run tests
yarn test
# to run end-to-end tests
# first, run `selenium/standalone-firefox:3.4.0` docker image
docker run -p 4444:4444 selenium/standalone-firefox:3.4.0
# then run test
yarn e2e
License
MIT