ClipX.JS

Maximize Clipboard Power with Minimal Size

Introducing ClipX.JS

The Smarter Clipboard Solution

Discover the ultimate in clipboard management with ClipX.js – a library designed to deliver powerful clipboard functionality with a minimal footprint. Clipx.js provides all the features you need while keeping your web applications fast and lightweight.

Why Choose ClipX.JS?

1. Lightweight with More Features

  • Size 2KB Only :
    At just 2KB, clipx.js is smaller than most clipboard libraries making it ideal for performance-conscious projects.
  • Integrated Feedback System :
    Unlike other libraries, clipx.js comes with built-in toast notifications and customizable messages to inform users of successful or failed clipboard actions. No need to integrate additional libraries for basic UI feedback.

2. Customization and Flexibility

  • Customizable Toasts :
    Style your toast notifications to match your application's design. Choose the position, duration, and even add custom styles effortlessly.
  • Message Control :
    Disable or modify the default "Copied !" message as needed, or show only the toast without altering the element's text content. This flexibility ensures clipx.js fits seamlessly into your existing UI.

3. Easy Integration

  • Simple API:
    clipx.js is designed for ease of use, with a straightforward API that requires minimal setup. Attach clipboard functionality to any element with just a few lines of code.
  • Broad Compatibility:
    Supports both modern and older browsers with fallback mechanisms, ensuring reliable clipboard operations across various environments.

4. Robust Error Handling

  • Built-in Error Handling:
    clipx.js doesn't just fail silently. It provides clear error feedback through customizable toast notifications, making it easier to debug and improve user experience.

Installation

To use ClipX.js in your project, you can include it in your HTML file via a CDN or import it in js by using node.

1. Via NPM

  • If you're using Node.js or a module bundler, you can install ClipX.js via npm :

    NPM 
    npm i clipxjs

2. Via CDN

  • Add the following <script> tag to your HTML file to include ClipX.js from a CDN ( use only one cdn ) :

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

    or

    cdn - unpkg 
    <script src="https://unpkg.com/clipxjs/dist/clipx.min.js"></script>

3. Direct Download

  • You can download the ZIP file directly from GitHub by using the following link :

    Download lipX ZIP

Initializing ClipX.JS?

To get started with ClipX.js, follow these steps to set up and configure the library according to your needs:

Basic Initialization

  • JavaScript 
    /* Initialize ClipX.js instance */
var clipx = new clipx();

Configuration Options

  • 1. Disable Text Content Change Globally

    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.

    JavaScript 
    clipx.disable.msg = false; // Set to true to disable text content change globally

  • 2. Disable Toast Notifications Globally

    To prevent toast notifications from showing globally, set the toast property to true. Otherwise, set it to false to enable toast notifications.

    JavaScript 
    clipx.disable.toast = false; // Set to true to disable toast notifications globally

  • 3. Set Custom Styles for Toast Notifications

    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.

    JavaScript 
    clipx.setCustomStyles({
     toast: "background-color: #333; color: #fff; padding: 12px; border-radius: 5px;"
    });

Attaching ClipX.JS Functionality

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.

Example: Using Data Attributes

Apply ClipX.js to elements with data-clipx-text or data-clipx-target attributes.

JavaScript 
clipx.attach("[data-clipx-text], [data-clipx-target]");

Example: Using Class Names

Alternatively, apply ClipX.js to elements with specific classes.

JavaScript 
clipx.attach(".clipx, .copy-btn, .your-class");

Attributes Overview

This section provides an overview of all the attributes available for ClipX.js.

  • 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.

Example Attributes

data-clipx-target

Description: Specifies the target element whose text will be copied to the clipboard when the button is clicked.

Example:

HTML 
<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>

data-clipx-text

Description: Defines a static text string that will be copied to the clipboard when the button is clicked.

Example:

HTML 
<button class="copy-btn" data-clipx-text="Static text to copy">Copy Static Text</button>

data-clipx-cut

Description: Cuts the text from the specified element, copying it to the clipboard and clearing the element's content.

Example:

HTML 
<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>

data-clipx-msg

Description: Copies the specified text to the clipboard and shows a toast notification with a custom message.

Example:

HTML 
<button class="copy-btn" data-clipx-text="Another static text" data-clipx-msg="Text copied successfully!">Copy with Custom Message</button>

data-clipx-toast

Description: Displays a toast notification with the copied text. The button text remains unchanged.

Example:

HTML 
<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-toast>Copy with Toast Only</button>

data-clipx-disable-msg

Description: Shows a toast notification without changing the button's text content.

Example:

HTML 
<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-disable-msg>Copy with Toast Only, No Text Change</button>

data-clipx-disable-toast & data-clipx-disable-msg

Description: Copies the specified text to the clipboard without showing a toast notification and changing text contents.

Example:

HTML 
<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>

data-clipx-disable-toast

Description: Copies the specified text to the clipboard without showing a toast notification.

Example:

HTML 
<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-disable-toast>Copy without Toast</button>

data-clipx-toast-position

Description: Defines the position of the toast notification (top or bottom).

Example:

HTML 
<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>

data-clipx-duration

Description: Sets the duration (in milliseconds) for which the toast notification is visible before it fades out.

Example:

HTML 
<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>