# Clipboard.js — Modern Copy to Clipboard with No Flash

> A tiny 3KB library that provides clean, modern copy-to-clipboard functionality using Selection and execCommand APIs, with no Flash fallback needed.

## Install

Save as a script file and run:

# Clipboard.js — Modern Copy to Clipboard with No Flash

## Quick Use
```bash
npm install clipboard
```
```html
<button class="btn" data-clipboard-text="Copy me!">Copy</button>
<script src="clipboard.min.js"></script>
<script>new ClipboardJS('.btn');</script>
```

## Introduction
Clipboard.js removes the pain of implementing copy-to-clipboard in the browser. Before it existed, developers relied on Flash-based solutions or fragile hacks. At just 3KB gzipped, it uses the Selection API and `execCommand` under the hood and works across all modern browsers without any framework dependency.

## What Clipboard.js Does
- Copies text, HTML, or input values to the system clipboard on click
- Works with any trigger element using `data-clipboard-*` attributes
- Supports programmatic usage with a clean constructor API
- Fires success and error events for custom feedback UIs
- Requires zero dependencies and no Flash plugins

## Architecture Overview
Clipboard.js listens for click events on elements matching a given selector. When triggered, it creates a temporary, off-screen textarea, populates it with the target content, executes `document.execCommand('copy')`, and removes the element. Modern browsers that support the Clipboard API can be leveraged as well. The library is written in vanilla JavaScript and distributed as a UMD module.

## Self-Hosting & Configuration
- Install via npm (`clipboard`) or include the CDN script tag
- Instantiate with `new ClipboardJS(selector)` or `new ClipboardJS(selector, options)`
- Use `data-clipboard-target` to copy content from another element by CSS selector
- Use `data-clipboard-action` to choose between `copy` (default) and `cut`
- Call `.destroy()` to remove all event listeners when done

## Key Features
- Tiny footprint at 3KB gzipped with zero dependencies
- Declarative API through data attributes for no-JS-needed setup
- Programmatic control via `text` and `target` option functions
- Event-based feedback with `success` and `error` callbacks
- Works in all modern browsers including IE9+ via graceful degradation

## Comparison with Similar Tools
- **Navigator.clipboard API** — native but requires HTTPS, user gesture, and permissions; Clipboard.js abstracts these concerns
- **document.execCommand** — the raw API Clipboard.js wraps; using it directly requires boilerplate textarea management
- **copy-to-clipboard** — similar npm package but Clipboard.js offers richer declarative attributes
- **react-copy-to-clipboard** — React-specific wrapper; Clipboard.js is framework-agnostic

## FAQ
**Q: Does it work without HTTPS?**
A: Yes. Unlike the native Clipboard API, Clipboard.js uses execCommand which works on HTTP pages in most browsers.

**Q: Can I use it with React or Vue?**
A: Absolutely. Instantiate it in a lifecycle hook or useEffect, passing a ref or selector. Community wrappers also exist for both frameworks.

**Q: What happens if copying fails?**
A: The error event fires, letting you show a fallback message like "Press Ctrl+C to copy." The selected text remains highlighted for manual copying.

**Q: Is Flash required?**
A: No. Clipboard.js was created specifically to eliminate Flash-based clipboard solutions like ZeroClipboard.

## Sources
- https://github.com/zenorocha/clipboard.js
- https://clipboardjs.com

---
Source: https://tokrepo.com/en/workflows/asset-1ed6887e
Author: Script Depot