Advanced Clipboard (Copy/Paste/Cut) Management Library – ClipX.js

Preview:

Description:

ClipX.js is an open-source, lightweight JavaScript library that enhances your website’s clipboard (copy, cut, and paste) functionality.

It allows you to define which elements are “copyable” or “cuttable” and provides clear toast-like visual feedback when these actions are performed.

It can be useful in:

• Copying code snippets: Make it easy for developers to grab code examples from your tutorials or documentation.
• Sharing quotes or excerpts: Allow visitors to quickly copy and share interesting text from your articles or blog posts.
• Simplifying form interactions: Enable users to copy and paste data within or between form fields.

How to use it:

1. Install & download the ClipX.js package.

# NPM
$ npm install clipx

2. Load the minified version of ClipX.js in your HTML document, either from your local installation or a CDN:

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

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

3. Create a new ClipX.js instance and bind its functionality to specific elements using the attach() method. You can target elements using HTML data attributes or CSS classes:

// Initialize
var clipx = new clipx();
// Apply ClipX.js to elements with data attributes
clipx.attach('[data-clipx-text], [data-clipx-target]');
// OR
// Apply ClipX.js to elements with specific classes
clipx.attach('.clipx, .copy-btn');

3. Use the following HTML data attributes on buttons or other elements to trigger copy or cut events:

• data-clipx-target: Specifies the element whose text should be copied
• data-clipx-text: Defines static text to be copied
• data-clipx-cut: Enables the cut operation

<!-- Copy text inside an element -->
<button 
  class="copy-btn" 
  data-clipx-target="#text-to-copy">
  Copy Text
</button>
<p id="text-to-copy">Text To Copy</p>

<!-- Copy text defined in the data-clipx-text attribute -->
<button 
  class="copy-btn" 
  data-clipx-text="Text to copy">
</button>

<!-- Cut text inside a textarea element -->
<button 
  class="copy-btn" 
  data-clipx-target="#text-to-cut" 
  data-clipx-cut>Cut Text
</button>
<textarea id="text-to-cut">Text To Cut</textarea>

4. Customize the feedback your users receive after performing clipboard actions.

• data-clipx-disable-msg: Prevents the element’s text from changing after the copy/cut action.
• data-clipx-disable-toast: Disables the toast notification entirely.
• data-clipx-toast-position: Controls the toast’s position (top or bottom).
• data-clipx-duration: Sets the toast’s display duration in milliseconds.

<button 
  class="copy-btn" 
  data-clipx-target="#text-to-copy"
  data-clipx-text="Another Copy Text"
  data-clipx-msg="Custom Feedback!"
  data-clipx-toast-position="top"
  data-clipx-duration="5000">
  Copy Text
</button>
<p id="text-to-copy">Text To Copy</p>

<!-- Disable feedback -->
<button 
  class="copy-btn" 
  data-clipx-target="#text-to-copy"
  data-clipx-disable-msg
  data-clipx-disable-toast>
  Copy Text
</button>
<p id="text-to-copy">Text To Copy</p>

5. You can also configure ClipX.js globally to disable the message or toast notifications:

clipx.disable.msg = true;
clipx.disable.toast = false;

6. Furthermore, you can customize the toast’s appearance using your own CSS:

clipx.setCustomStyles({
  toast: "/* your CSS styles here /*"
});

How it works:

ClipX.js utilizes the Clipboard API (if available) or falls back to a temporary textarea element for older browsers to perform copy and cut operations. It manages permissions, handles errors gracefully, and provides visual feedback through customizable toast notifications.

Changelog:

04/02/2025

• Add CSS class to SVG icons in success and error toast notifications