@reallyland/really-clipboard-copy NPM

Better element for the web

Pre-requisites

Java 8 (web-component-tester works 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