ClipX.js is an ultra-light JavaScript library that simplifies clipboard tasks and enriches user feedback. It offers straightforward copy, cut, and paste
capabilities, and built-in toast notifications
that you can easily customize, providing a quick and efficient way to handle clipboard and notification needs. ——— The Smarter Clipboard Solution.
For more information about this project, please visit our official website: ClipX
- Why Choose ClipX.js?
- Installation
- Initializing ClipX.js
- Attaching ClipX Functionality
- Attributes Overview
- Example
- Demo
- At only 2KB, ClipX.js is smaller and faster than most clipboard libraries.
- Includes customizable toast notifications for clipboard actions—no need for additional UI libraries.
- Easily style toasts, control message display, and integrate seamlessly with your app's design.
- Simple API with minimal setup, ensuring broad compatibility across modern and older browsers.
- Provides clear, customizable error feedback to enhance user experience and simplify debugging.
npm i clipxjs
Use only one CDN
jsdelivr
<script src="https://cdn.jsdelivr.net/npm/clipxjs/dist/clipx.min.js"></script>
OR
unpkg
<script src="https://unpkg.com/clipxjs/dist/clipx.min.js"></script>
To get started with ClipX.js, follow these steps to set up and configure the library according to your needs:
/* Initialize ClipX.js instance */
var clipx = new clipx();
To prevent the text content of elements from changing globally, set the msg
property to true
. Otherwise, set it to false
to enable text content change.
clipx.disable.msg = false; // Set to true to disable text content change globally
To prevent toast notifications from showing globally, set the toast
property to true
. Otherwise, set it to false
to enable toast notifications.
clipx.disable.toast = false; // Set to true to disable toast notifications globally
Customize the appearance of toast notifications by providing CSS styles. For example, the following configuration sets a dark background with white text, padding, and rounded corners.
clipx.setCustomStyles({
toast: "background-color: #333; color: #fff; padding: 12px; border-radius: 5px;"
});
To bind ClipX.js functionality to elements, use the attach
method with appropriate selectors. This method will enable clipboard operations on elements with the specified attributes or classes.
Apply ClipX.js to elements with data-clipx-text
or data-clipx-target
attributes.
clipx.attach('[data-clipx-text], [data-clipx-target]');
Alternatively, apply ClipX.js to elements with specific classes.
clipx.attach('.clipx, .copy-btn, .your-class');
data-clipx-target
: Element selector for text source.data-clipx-text
: Static text to copy or cut.data-clipx-cut
: Toggle cut operation.data-clipx-msg
: Custom success message.data-clipx-toast
: Show only toast, no text change.data-clipx-disable-msg
: Disable element text change.data-clipx-disable-toast
: Disable toast notification.data-clipx-toast-position
: Position of the toast (top/bottom).data-clipx-duration
: Duration of toast visibility.
Description: Specifies the target element whose text will be copied to the clipboard when the button is clicked.
Example:
<button class="copy-btn" data-clipx-target="#text-to-copy">Copy Text</button>
<p id="text-to-copy">This is the text to be copied.</p>
Description: Defines a static text string that will be copied to the clipboard when the button is clicked.
Example:
<button class="copy-btn" data-clipx-text="Static text to copy">Copy Static Text</button>
Description: Cuts the text from the specified element, copying it to the clipboard and clearing the element's content.
Example:
<textarea id="text-to-cut">This text will be cut.</textarea>
<button class="copy-btn" data-clipx-target="#text-to-cut" data-clipx-cut>Cut Text</button>
Description: Copies the specified text to the clipboard and shows a toast notification with a custom message.
Example:
<button class="copy-btn" data-clipx-text="Another static text" data-clipx-msg="Text copied successfully!">Copy with Custom Message</button>
Description: Displays a toast notification with the copied text. The button text remains unchanged.
Example:
<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-toast>Copy with Toast Only</button>
Description: Shows a toast notification without changing the button's text content.
Example:
<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-disable-msg>Copy with Toast Only, No Text Change</button>
Description: Copies the specified text to the clipboard without showing a toast notification And Changing Text Contents.
Example:
<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-disable-toast data-clipx-disable-msg>Copy without Toast & with Change Text</button>
Description: Copies the specified text to the clipboard without showing a toast notification.
Example:
<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-disable-toast>Copy without Toast</button>
Description: Defines the position of the toast notification (top or bottom).
Example:
<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-toast data-clipx-toast-position="top">Copy with Toast on Top</button>
<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-toast data-clipx-toast-position="bottom">Copy with Toast on Bottom</button>
Description: Sets the duration (in milliseconds) for which the toast notification is visible before it fades out.
Example:
<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-toast data-clipx-duration="3000">Copy with 3 Seconds Toast</button>
<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-duration="3000">Copy with 3 Seconds Toast & Content Change</button>
<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-disable-toast data-clipx-duration="3000">Copy 3 sec Content Change</button>
<h1>ClipX.js Demo</h1>
<button class="copy-btn" data-clipx-text="Static text to copy" data-clipx-msg="Static text copied!">Copy Static Text</button>
<button class="copy-btn" data-clipx-target="#text-to-copy" data-clipx-cut>Cut Text</button>
<button class="copy-btn" data-clipx-target="#text-to-copy">Copy Text</button>
<p id="text-to-copy">This text will be cut and copied to the clipboard.</p>
<button class="copy-btn" data-clipx-text="Another static text" data-clipx-toast data-clipx-toast-position="bottom">Copy with Toast Only</button>
<button class="copy-btn" data-clipx-text="Text with 5 seconds toast" data-clipx-toast data-clipx-duration="5000">Copy with 5 Seconds Toast</button>
<script src="https://cdn.jsdelivr.net/npm/clipxjs/dist/clipx.min.js"></script>
<script>
// Initialize ClipX.js instance
var clipx = new clipx();
// Optional: Set custom styles for toast notifications
clipx.setCustomStyles({
toast: "background-color: #333; color: #fff; padding: 12px; border-radius: 5px;"
});
// Attach ClipX.js functionality to elements
clipx.attach('[data-clipx-text], [data-clipx-target]');
</script>