Copy to clipboard

Web component to create a button to copy to clipboard.

• No dependencies
• Very light
• Follow the progressive enhancement strategy. If JavaScript fails the page continue working.
• No styles or themes are provided with this package.
• Build with modern JavaScript.

Usage

Import and register the component with the desired tag name:

import Copy from "copy-to-clipboard/copy.js";

customElements.define("oom-copy", Copy);

Use it in the HTML code. The data-target attribute must contain the id of the text container:

<oom-copy data-target="code"></oom-toc>

<textarea id="code">Some content</textarea>

You can use the data-text attribute to assign the text directly:

<oom-copy data-text="Some content"></oom-toc>

Customization

You can provide your own button:

<oom-copy data-text="Some content"><button>Copy to clipboard</button></oom-toc>

Or define a default function to create the button:

import Copy from "copy-to-clipboard/copy.js";

Copy.createButton = () => {
  const btn = document.createElement("button");
  btn.classList.add("copy-btn");
  btn.innerText = "Copy to clipboard";
  return btn;
};

You can configure the notification message:

<oom-copy data-text="Some content" data-message="Text has copied!"></oom-toc>

Configure a default message:

import Copy from "copy-to-clipboard/copy.js";
Copy.messsage = "Text has copied!";

Or create a new notification element:

import Copy from "copy-to-clipboard/copy.js";

Copy.createNotification = (message = CopyToClipboard.message) => {
  const element = document.createElement("div");
  element.setAttribute("role", "status");
  element.innerHTML = message;
  return element;
};