0.0.3

Clipboard

A pure vanilla JS implementation of Zag JS Clipboard Opens in a new window

Anatomy

The Clipboard component consists of the following data-part

root control trigger label input indicator

To hide and show the icons on copy state you must add id="clipboard-copy" and id="clipboard-copied" to the respective icons

<div class="clipboard clipboard-js" data-default-value="info@netoum.com">
                  <div data-part="root">
                  <label data-part="label">Contact Netoum</label>
                  <div data-part="control">
                  <input data-part="input">
                  <button data-part="trigger" class="button button--square">
                  <svg id="clipboard-copy" class="button__icon" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2">
                  </path>
                  </svg>
                  <svg id="clipboard-copied" class="button__icon" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 20 20" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                  </svg>
                  </button>
                  </div>
                  </div>
                  </div>

Select the input text and press Ctrl + C to experience the accessibility feature.

Data attributes

Each clipboard can be set with different settings with the following data-attribute.

<div class="clipboard clipboard-js" data-default-value="info@netoum.com" data-timeout="500">
                  <div data-part="root">
                  <label data-part="label">Contact Netoum</label>
                  <div data-part="control">
                  <input data-part="input">
                  <button data-part="trigger" class="button button--square">
                  <svg id="clipboard-copy" class="button__icon" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2">
                  </path>
                  </svg>
                  <svg id="clipboard-copied" class="button__icon" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 20 20" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                  </svg>
                  </button>
                  </div>
                  </div>
                  </div>
Data attribute Type / Options Description
id string The unique id of the component. Default generated if none is provided
data-default-value string The initial value to be copied to the clipboard when rendered. Use when you don't need to control the value of the clipboard.
data-value string The controlled value of the clipboard
data-timeout number The timeout for the copy operation .

Callbacks

Each Clipboard component can receive callbacks that can be used to respond to user interaction with custom behavior.

You must add a custom id for the clipboard and a event listener for your event name


                      document.getElementById("my-callback-clipboard")
                      ?.addEventListener("my-callback-clipboard-event", (event) => {
                        console.log("Received event:", (event as CustomEvent).detail);
                      });
                  
<div id="my-callback-clipboard" class="clipboard clipboard-js" data-default-value="info@netoum.com" data-on-status-change="my-callback-clipboard-event">
                  <div data-part="root">
                  <label data-part="label">Contact Netoum</label>
                  <div data-part="control">
                  <input data-part="input">
                  <button data-part="trigger" class="button button--square">
                  <svg id="clipboard-copy" class="button__icon" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2">
                  </path>
                  </svg>
                  <svg id="clipboard-copied" class="button__icon" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 20 20" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                  </svg>
                  </button>
                  </div>
                  </div>
                  </div>

Open your browser's console to see the events received when the clipboard is copied

Custom (Tailwind)

If you are using Tailwind styling, you can customize each clipboard and its parts with Tailwind utilities 

<div class="clipboard clipboard-js" data-default-value="info@netoum.com">
                  <div data-part="root" class="bg-red-700 rounded-xl p-2">
                  <label data-part="label" class="!text-white">Contact Netoum</label>
                  <div data-part="control">
                  <input data-part="input">
                  <button data-part="trigger" class="button button--square">
                  <svg id="clipboard-copy" class="button__icon" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2">
                  </path>
                  </svg>
                  <svg id="clipboard-copied" class="button__icon" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 20 20" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                  </svg>
                  </button>
                  </div>
                  </div>
                  </div>

Templates

Clipboard components is available in the followng templates

Checkbox Code