{"id":28750496,"url":"https://github.com/sukristyan/kopasin-js","last_synced_at":"2025-07-10T08:35:42.569Z","repository":{"id":253462650,"uuid":"843374041","full_name":"sukristyan/kopasin-js","owner":"sukristyan","description":"kopasin-js is a simple, lightweight, and customizable JavaScript library for adding copy-paste interactivity to your projects","archived":false,"fork":false,"pushed_at":"2024-08-17T17:23:49.000Z","size":55,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-16T21:48:07.456Z","etag":null,"topics":["allowpasting","cjs","copy","copylibrary","copypaste","copypastelibrary","css","ecma","ejs","html","html5","iife","javascript","js-library","library","library-js","mjs","paste","typescript"],"latest_commit_sha":null,"homepage":"https://kopasin-js.galih.me","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sukristyan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-16T11:26:49.000Z","updated_at":"2024-09-05T05:51:51.000Z","dependencies_parsed_at":"2024-08-16T21:57:44.385Z","dependency_job_id":"60648c2c-d02d-448b-8187-e041add2a7d2","html_url":"https://github.com/sukristyan/kopasin-js","commit_stats":{"total_commits":12,"total_committers":2,"mean_commits":6.0,"dds":0.08333333333333337,"last_synced_commit":"a2ebde6bd289c1c29e5f2f7cb6a84109e2047f97"},"previous_names":["masgalih320/kopasin-js","sukristyan/kopasin-js"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/sukristyan/kopasin-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sukristyan%2Fkopasin-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sukristyan%2Fkopasin-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sukristyan%2Fkopasin-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sukristyan%2Fkopasin-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sukristyan","download_url":"https://codeload.github.com/sukristyan/kopasin-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sukristyan%2Fkopasin-js/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264551702,"owners_count":23626538,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["allowpasting","cjs","copy","copylibrary","copypaste","copypastelibrary","css","ecma","ejs","html","html5","iife","javascript","js-library","library","library-js","mjs","paste","typescript"],"created_at":"2025-06-16T21:36:50.288Z","updated_at":"2025-07-10T08:35:42.299Z","avatar_url":"https://github.com/sukristyan.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# KopasinJS\n\n**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.\n\n![License](https://img.shields.io/npm/l/kopasin-js)\n![GitHub Downloads (all assets, all releases)](https://img.shields.io/github/downloads/masgalih320/kopasin-js/total)\n![npm bundle size](https://img.shields.io/bundlephobia/min/kopasin-js)\n![GitHub commit activity](https://img.shields.io/github/commit-activity/w/masgalih320/kopasin-js)\n\n## Features\n\n- **Simple Setup:** Easy to integrate with just a few lines of code.\n- **Customizable:** Tailor the library to fit your specific needs.\n- **Lightweight:** Minimal impact on your project's performance.\n- **Cross-Browser Support:** Works seamlessly across modern web browsers.\n\n##  Visits\n\n- [Demo Site](https://kopasin-js.galih.me)\n- [Portfolio](https://galih.me)\n- [Galih Blogs](https://masgalih.net)\n\n## Installation\n\nTo get started with `kopasin-js`, you can either include it via CDN or install it via npm.\n\n### Using CDN\n\nAdd the following script to your HTML:\n\n```html\n# USING CDN\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/kopasin-js@latest/dist/kopasin-js.global.js\"\u003e\u003c/script\u003e\n# OR\n\u003cscript src=\"https://unpkg.com/kopasin-js@1.1.7/dist/kopasin-js.global.js\"\u003e\u003c/script\u003e\n\n# USING DOWNLOADED FILES\n\u003cscript src=\"dist/kopasin-js.global.js\"\u003e\u003c/script\u003e\n```\n\n## With Import\n\nInstall via NPM\n\n```bash\nnpm i kopasin-js\n```\n\nAnd then import the library\n\n```js\nimport KopasinJS from \"kopasin-js\"\n```\n\n## Example Usage\n\n### Copying Text from an Input\n\nTo copy a value from input element, we need to create 2 element, which is the `\u003cinput /\u003e` element and `\u003cbutton\u003e\u003c/button\u003e` element\n\n```html\n\u003cinput type=\"text\" id=\"copy-this\" value=\"Copy Me\" readonly\u003e\n\u003cbutton type=\"button\" id=\"copy-button\"\u003eCopy\u003c/button\u003e\n```\n\nAfter that, load KopasinJS like this\n\n```js\nnew Kopasin({\n  copy: {\n    on: 'click',\n    trigger: document.getElementById('copy-button'),\n    source: document.getElementById('copy-this'),\n    success: function () {\n      console.log('Copied!')\n    },\n    error: function () {\n      console.log('Failed to copy')\n    }\n  },\n});\n```\n\nThe `success` and `error` callback is optional, but you can use the `success` callback for improving the user experience with interactivity after copying is successful.\n\n### Copying Text from an Element\n\nTo copy a value from an element (example: `\u003cdiv\u003e`), we also need to create 2 element, which is the `\u003cdiv\u003e\u003c/div\u003e` element and `\u003cbutton\u003e\u003c/button\u003e` element.\n\n```html\n\u003cdiv id=\"copy-this\"\u003eCopy Me\u003c/div\u003e \u003c!-- You can also use another element like \u003cp\u003e, \u003cspan\u003e and anything --\u003e\n\u003cbutton type=\"button\" id=\"copy-button\"\u003eCopy\u003c/button\u003e\n```\n\nFor the javascript code is still same.\n\n```js\nnew Kopasin({\n  copy: {\n    on: 'click',\n    trigger: document.getElementById('copy-button'),\n    source: document.getElementById('copy-this'),\n    success: function () {\n      console.log('Copied!')\n    },\n    error: function () {\n      console.log('Failed to copy')\n    }\n  },\n});\n```\n\n## Options for `copy`\n\n| Key     | Type        | Description                                                                                                            | Required | Default Value |\n|---------|-------------|------------------------------------------------------------------------------------------------------------------------|----------|---------------|\n| on      | String      | The event that will be used to trigger the element in the `trigger` option, must be valid event for `addEventListener` | yes      | click         |\n| trigger | HTMLElement | This element will be used to trigger the copy process                                                                              | yes      |               |\n| source  | HTMLElement | Element that you want to copy the value/text from                                                                      | yes      |               |\n| success | Function    | Function that will fired after copying is done                                                                         | no       | () =\u003e {}      |\n| error   | Function    | Function that will fired after copying is failed                                                                       | no       | () =\u003e {}      |\n\n## Options for `paste`\n\n| Key     | Type                            | Description                                                                                                            | Required | Default Value |\n|---------|---------------------------------|------------------------------------------------------------------------------------------------------------------------|----------|---------------|\n| on      | String                          | The event that will be used to trigger the element in the `trigger` option, must be valid event for `addEventListener` | yes      | click         |\n| trigger | HTMLElement                     | This element will be used to trigger the pasting process                                                               | yes      |               |\n| target  | HTMLInputElement \\| HTMLElement | Target element that the value/text will replaced with a value from your clipboard                                      | yes      |               |\n| success | Function                        | Function that will fired after pasting is done                                                                         | no       | () =\u003e {}      |\n| error   | Function                        | This function will fired if pasting are failed                                                                         | no       | () =\u003e {}      |\n\n## Donate\n\nIf you have used this library and it's useful for you, please consider to donate:\n\n[Saweria](https://saweria.co/sukristyan)\n\n## License\n\nThe KopasinJS is open-sourced software licensed under the [MIT license](/LICENSE.md).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsukristyan%2Fkopasin-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsukristyan%2Fkopasin-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsukristyan%2Fkopasin-js/lists"}