KopasinJS

kopasin-js is a lightweight and customizable JavaScript library designed to add copy-paste functionality to your web projects. With kopasin-js, you can effortlessly enable users to copy and paste text with minimal setup and maximum flexibility. This library use 0% of JQuery.

Features

• Simple Setup: Easy to integrate with just a few lines of code.
• Customizable: Tailor the library to fit your specific needs.
• Lightweight: Minimal impact on your project's performance.
• Cross-Browser Support: Works seamlessly across modern web browsers.

Visits

• Demo Site
• Portfolio
• Galih Blogs

Installation

To get started with kopasin-js, you can either include it via CDN or install it via npm.

Using CDN

Add the following script to your HTML:

# USING CDN
<script src="https://cdn.jsdelivr.net/npm/kopasin-js@latest/dist/kopasin-js.global.js"></script>
# OR
<script src="https://unpkg.com/[email protected]/dist/kopasin-js.global.js"></script>

# USING DOWNLOADED FILES
<script src="dist/kopasin-js.global.js"></script>

With Import

Install via NPM

npm i kopasin-js

And then import the library

import KopasinJS from "kopasin-js"

Example Usage

Copying Text from an Input

To copy a value from input element, we need to create 2 element, which is the <input /> element and <button></button> element

<input type="text" id="copy-this" value="Copy Me" readonly>
<button type="button" id="copy-button">Copy</button>

After that, load KopasinJS like this

new Kopasin({
  copy: {
    on: 'click',
    trigger: document.getElementById('copy-button'),
    source: document.getElementById('copy-this'),
    success: function () {
      console.log('Copied!')
    },
    error: function () {
      console.log('Failed to copy')
    }
  },
});

The success and error callback is optional, but you can use the success callback for improving the user experience with interactivity after copying is successful.

Copying Text from an Element

To copy a value from an element (example: <div>), we also need to create 2 element, which is the <div></div> element and <button></button> element.

<div id="copy-this">Copy Me</div> <!-- You can also use another element like <p>, <span> and anything -->
<button type="button" id="copy-button">Copy</button>

For the javascript code is still same.

new Kopasin({
  copy: {
    on: 'click',
    trigger: document.getElementById('copy-button'),
    source: document.getElementById('copy-this'),
    success: function () {
      console.log('Copied!')
    },
    error: function () {
      console.log('Failed to copy')
    }
  },
});

Options for copy

| Key | Type | Description | Required | Default Value | |---------|-------------|------------------------------------------------------------------------------------------------------------------------|----------|---------------| | on | String | The event that will be used to trigger the element in the trigger option, must be valid event for addEventListener | yes | click | | trigger | HTMLElement | This element will be used to trigger the copy process | yes | | | source | HTMLElement | Element that you want to copy the value/text from | yes | | | success | Function | Function that will fired after copying is done | no | () => {} | | error | Function | Function that will fired after copying is failed | no | () => {} |

Options for paste

| Key | Type | Description | Required | Default Value | |---------|---------------------------------|------------------------------------------------------------------------------------------------------------------------|----------|---------------| | on | String | The event that will be used to trigger the element in the trigger option, must be valid event for addEventListener | yes | click | | trigger | HTMLElement | This element will be used to trigger the pasting process | yes | | | target | HTMLInputElement | HTMLElement | Target element that the value/text will replaced with a value from your clipboard | yes | | | success | Function | Function that will fired after pasting is done | no | () => {} | | error | Function | This function will fired if pasting are failed | no | () => {} |

Donate

If you have used this library and it's useful for you, please consider to donate:

Saweria

License

The KopasinJS is open-sourced software licensed under the MIT license.