README
@reallyland/really-clipboard-copy
Copy content to clipboard
Better element for the web
Table of contents
Pre-requisites
- Java 8 (
web-component-testerworks without any issue with Java 8) - Node.js >= 8.16.0
- NPM >= 6.4.1 (NPM comes with Node.js, no separate installation is required.)
- (Optional for non-VS Code users) Syntax Highlighting for lit-html in VS Code
- web-component-tester >= 6.9.2 (For running tests, it's recommended to install globally on your system due to its insanely huge install size by running
npm i -g web-component-tester.)
Installation
# Install via NPM
$ npm install @reallyland/really-clipboard-copy
Usage
index.html
<html>
<head>
<script type="module">
import 'https://unpkg.com/@reallyland/really-clipboard-copy@latest/dist/really-clipboard-copy.js?module';
const asyncCopyEl = document.body.querySelector('.async-copy');
const syncCopyEl = document.body.querySelector('.sync-copy');
asyncCopyEl.addEventListener('copy-success', (ev) => {
const { value } = ev.detail || {};
console.log(`Copied value is ${value}`);
});
asyncCopyEl.addEventListener('copy-error', (ev) => {
const { reason } = ev.detail || {};
console.error(reason);
});
syncCopyEl.addEventListener('copy-success', (ev) => {
const { value } = ev.detail || {};
console.log(`Copied value is ${value}`);
});
syncCopyEl.addEventListener('copy-error', (ev) => {
const { reason } = ev.detail || {};
console.error(reason);
});
</script>
</head>
<body>
<h2>Copy input text using Async Clipboard API if supported</h2>
<really-clipboard-copy class="async-copy">
<input copy-id="copiable" type="text" readonly value="Hello, World!" />
<button copy-for="copiable">Copy</button>
</really-clipboard-copy>
<h2>Copy input text only using document.execCommand('copy')</h2>
<really-clipboard-copy class="sync-copy" sync>
<input copy-id="copiable" type="text" readonly value="Hello, World!" />
<button copy-for="copiable">Copy</button>
</really-clipboard-copy>
</body>
</html>
Browser compatibility
really-clipboard-copy works in all major browsers (Chrome, Firefox, IE, Edge, Safari, and Opera).
Heavily tested on the following browsers:
| Name | OS |
|---|---|
| Internet Explorer 11 | Windows 7 |
| Edge 13 | Windows 10 |
| Edge 17 | Windows 10 |
| Safari 9 | Mac OS X 10.11 |
| Safari 10.1 | Mac OS 10.12 |
| Chrome 41 (WRE) | Linux |
| Chrome 69 (WRE 2019) | Windows 10 |
| Firefox 62 (w/o native Shadow DOM) | macOS Mojave (10.14) |
| Firefox 63 (native Shadow DOM support) | Windows 10 |
API references
Demo
License
MIT License © Rong Sen Ng (motss)