Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/masgalih320/kopasin-js
kopasin-js is a simple, lightweight, and customizable JavaScript library for adding copy-paste interactivity to your projects
https://github.com/masgalih320/kopasin-js
allowpasting cjs copy copylibrary copypaste copypastelibrary css ecma ejs html html5 iife javascript js-library library library-js mjs paste typescript
Last synced: about 2 hours ago
JSON representation
kopasin-js is a simple, lightweight, and customizable JavaScript library for adding copy-paste interactivity to your projects
- Host: GitHub
- URL: https://github.com/masgalih320/kopasin-js
- Owner: masgalih320
- License: mit
- Created: 2024-08-16T11:26:49.000Z (about 1 month ago)
- Default Branch: master
- Last Pushed: 2024-08-17T17:23:49.000Z (about 1 month ago)
- Last Synced: 2024-09-20T08:31:34.920Z (8 days ago)
- Topics: allowpasting, cjs, copy, copylibrary, copypaste, copypastelibrary, css, ecma, ejs, html, html5, iife, javascript, js-library, library, library-js, mjs, paste, typescript
- Language: HTML
- Homepage: https://kopasin-js.galih.me
- Size: 53.7 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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](https://kopasin-js.galih.me)
- [Portfolio](https://galih.me)
- [Galih Blogs](https://masgalih.net)
## 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:
```html
# USING CDN
# OR
# USING DOWNLOADED FILES
```
## With Import
Install via NPM
```bash
npm i kopasin-js
```
And then import the library
```js
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 `` element and `` element
```html
Copy
```
After that, load KopasinJS like this
```js
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: `
`), we also need to create 2 element, which is the `` element and `` element.
```html
Copy Me
Copy
```
For the javascript code is still same.
```js
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](https://saweria.co/sukristyan)
## License
The KopasinJS is open-sourced software licensed under the [MIT license](/LICENSE.md).