Skip to content
This repository has been archived by the owner on Oct 28, 2019. It is now read-only.

reallyland/really-clipboard-copy

Repository files navigation

🚨 No longer maintained. Moved to reallyland/really-elements. 🚨

@reallyland/really-clipboard-copy

Copy content to clipboard


Buy Me A Coffee tippin.me Follow me

Version lit-element Node version MIT License

Downloads Total downloads Packagephobia Bundlephobia

CircleCI Dependency Status

codebeat badge Codacy Badge Code of Conduct

Better element for the web

Table of contents

Pre-requisites

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

Demo@StackBlitz

License

MIT License © Rong Sen Ng (motss)