0.0.1 • Published 4 years ago
@gastier/customelement-textclipboard v0.0.1
Customized built-in elements <text-clipboard>
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}`);
});
0.0.1
4 years ago