Customized built-in elements <text-clipboard>

The goal of this module is to have a reusable component to copied text to clipboard.

• Demo

Install

npm i @gastier/customelement-textclipboard

Usage

To attach clipboard button to element, use target attribute with existing unique selector.

<-- Create a clipboard button -->
<span id="id">Text to copy</span>
<text-clipboard target="#id"></text-clipboard>

<-- Create a clipboard button without attribute select the previous element -->
<code>jdikappelndnso5dfsa</code>
<text-clipboard></text-clipboard>

Attributes

Custom event

I create a custom event afterselect to add an message flash for example.
This event is dispatch after the clipboard action is launch.

document.addEventListener('afterselect', e => { 
    console.log(`Text copied is ${e.detail.text}`); 
});