Third-party plugins

Copy To Clipboard

Clipboard components are vital tools that simplify data copying and pasting in applications, boosting user efficiency and enhancing overall interaction.

Getting started

Setup

Below are the comprehensively outlined steps you can follow to seamlessly integrate <a href="https://clipboardjs.com/" target="_blank" class="link link-primary font-semibold">Clipboard JS</a> into your project for efficient text copying functionality.

<script src="../path/to/clipboard/dist/clipboard.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>

<script src="./node_modules/flyonui/dist/helper-clipboard.js"></script>

Basic example

Default

To copy text from a specific element, target it using its `Id` and assign it to the `data-clipboard-target` attribute in the trigger button. Additionally, set the value of the `data-clipboard-action` attribute to `copy`. This setup ensures that clicking the button will copy the text from the targeted element to the clipboard.

npm install semji-design

Illustrations

Copy from input

Use the `js-clipboard-success-text` component class to display default text, and set the value of the data attribute `data-clipboard-success-text` to specify the text that should appear after the content is successfully copied to the clipboard.

With input group

Below example showcases how to utilize the copy clipboard component with an input group.

With tooltip — With success message only

Below examples showcases how to utilize the copy clipboard functionality with tooltips.


    $
    npm i semji-design

With tooltip — With dynamic success message

The example below illustrates the use of the copy clipboard component along with a tooltip displaying a dynamic success message.


    $
    npm i semji-design

With tooltip — Extended clipboard with tooltip

Below is an example demonstrating the extended functionality of the copy clipboard component. It includes a centered tooltip that dynamically displays a success message. This setup enables copying by clicking anywhere within the element.

In modals

The example below illustrates the use of the copy clipboard component in modals.

Copy source code block

The example below illustrates the use of the copy clipboard component in source code block.

const clipboard = new ClipboardJS(el, {
    text: trigger => {
    const clipboardText = trigger.dataset.clipboardText

    if (clipboardText) return clipboardText

    const clipboardTarget = trigger.dataset.clipboardTarget
    const $element = document.querySelector(clipboardTarget)

    if ($element.tagName === 'SELECT' || $element.tagName === 'INPUT' || $element.tagName === 'TEXTAREA')
      return $element.value
    else return $element.textContent
    }

})