@gastier/customelement-textclipboard

Copy text to clipboard

Usage no npm install needed!

<script type="module">
  import gastierCustomelementTextclipboard from 'https://cdn.skypack.dev/@gastier/customelement-textclipboard';
</script>

README

Customized built-in elements <text-clipboard>

npm

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

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

Attribute Type Description
target string Selector corresponding to a valid HTML element

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}`); 
});