{"id":14990149,"url":"https://github.com/substrate-system/copy-button","last_synced_at":"2025-04-12T02:05:21.095Z","repository":{"id":229912387,"uuid":"777962759","full_name":"substrate-system/copy-button","owner":"substrate-system","description":"Web component button to copy something","archived":false,"fork":false,"pushed_at":"2025-04-09T16:47:35.000Z","size":122,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T02:05:16.001Z","etag":null,"topics":["button","component","copy","web","webcomponent"],"latest_commit_sha":null,"homepage":"https://substrate-system.github.io/copy-button/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/substrate-system.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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-03-26T20:30:49.000Z","updated_at":"2025-03-30T23:26:28.000Z","dependencies_parsed_at":"2024-03-26T23:00:41.845Z","dependency_job_id":"aef51d05-cca7-44e8-9677-35b7373022fe","html_url":"https://github.com/substrate-system/copy-button","commit_stats":{"total_commits":73,"total_committers":2,"mean_commits":36.5,"dds":0.1095890410958904,"last_synced_commit":"cc2378b40958049acbd42f7588101a8a3b2ee34d"},"previous_names":["nichoth/copy-button","bicycle-codes/copy-button","substrate-system/copy-button"],"tags_count":24,"template":false,"template_full_name":"nichoth/template-ts-browser","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fcopy-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fcopy-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fcopy-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fcopy-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/substrate-system","download_url":"https://codeload.github.com/substrate-system/copy-button/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248505863,"owners_count":21115354,"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":["button","component","copy","web","webcomponent"],"created_at":"2024-09-24T14:19:35.020Z","updated_at":"2025-04-12T02:05:21.081Z","avatar_url":"https://github.com/substrate-system.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# copy button\n![tests](https://github.com/substrate-system/copy-button/actions/workflows/nodejs.yml/badge.svg)\n[![module](https://img.shields.io/badge/module-ESM-blue?style=flat-square)](README.md)\n[![types](https://img.shields.io/npm/types/@substrate-system/copy-button?style=flat-square)](./dist/index.d.ts)\n[![semantic versioning](https://img.shields.io/badge/semver-2.0.0-blue?logo=semver\u0026style=flat-square)](https://semver.org/)\n[![install size](https://flat.badgen.net/packagephobia/install/@substrate-system/copy-button?cache-control=no-cache)](https://packagephobia.com/result?p=@substrate-system/copy-button)\n[![license](https://img.shields.io/badge/license-Polyform_Non_Commercial-26bc71?style=flat-square)](LICENSE)\n\n\nA button to copy some text to the system clipboard, made with webcomponents.\n\n\u003cdetails\u003e\u003csummary\u003e\u003ch2\u003eContents\u003c/h2\u003e\u003c/summary\u003e\n\n\u003c!-- toc --\u003e\n\n- [install](#install)\n- [demonstration](#demonstration)\n- [globals](#globals)\n- [use](#use)\n  * [Example without a build step](#example-without-a-build-step)\n  * [With a build step](#with-a-build-step)\n  * [`/copy`](#copy)\n- [CSS](#css-1)\n  * [attributes](#attributes)\n  * [Screenshots](#screenshots)\n\n\u003c!-- tocstop --\u003e\n\n\u003c/details\u003e\n\n\n## install\n```sh\nnpm i -S @substrate-system/copy-button\n```\n\n\u003e [!IMPORTANT]  \n\u003e Be sure to import `@substrate-system/a11y` too.\n\n## demonstration\n\nSee [substrate-system.github.io/copy-button](https://substrate-system.github.io/copy-button/) for an example.\n\n\n## globals\nThis depends on `@substrate-system/a11y` for a `.visually-hidden` class. Install\nand import that module as well.\n\nCSS variables `--success-color` and `--copy-color` determine the color of the\nsuccess checkmark and copy icon.\n\n## use\nInclude this package, then call `customElements.define` with your preferred tag\nname. Be sure to import [`@substrate-system/a11y`](https://github.com/substrate-system/a11y) \ntoo; we use class names exposed there for accessibility.\n\n```js\nimport { CopyButton } from '@substrate-system/copy-button'\nimport '@substrate-system/a11y'\nimport '@substrate-system/copy-button/css'\n\ncustomElements.define('copy-button', CopyButton)\n```\n\nOr call the exported function `register` to use the default tag name, `copy-button`.\n\n```js\nimport { register } from '@substrate-system/copy-button'\n\nregister()\n\n// the web component can be used now\n```\n\n### Example without a build step\n\n#### Copy the files\nCopy files so they are accessible by your web server.\n\n##### JS\n```sh\ncp ./node_modules/@substrate-system/copy-button/dist/index.min.js public/copy-button.js\n```\n\n##### CSS\n```sh\ncp ./node_modules/@substrate-system/copy-button/dist/style.min.css public/copy-button.css\n```\n\n#### Use in HTML\n```html\n\u003chead\u003e\n    \u003c!-- style --\u003e\n    \u003clink rel=\"stylesheet\" href=\"./copy-button.css\"\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n    \u003c!-- use the tag --\u003e\n    \u003ccopy-button payload=\"example text\"\u003e\u003c/copy-button\u003e\n\n    \u003c!-- include the script --\u003e\n    \u003cscript type=\"module\"\u003e\n        import { CopyButton } from '/copy-button.js'\n        customElements.define('copy-button', CopyButton)\n    \u003c/script\u003e\n\u003c/body\u003e\n```\n\n### With a build step\nWe expose several import options\n\n```js\n// default, unminified\nimport '@substrate-system/copy-button'\n\n// minified\nimport '@substrate-system/copy-button/min'\n\n// style\nimport '@substrate-system/copy-button/css'\n\n// style, minifed\nimport '@substrate-system/copy-button/css/min'\n```\n\nIn `vite`, for example, import like this\n\n```js\nimport '@substrate-system/copy-button'\nimport '@substrate-system/copy-button/css'\n// or minified css\nimport '@substrate-system//copy-button/css/min'\n```\n\n### `/copy`\n\nImport just the copy function, no UI.\n\n```js\nimport { clipboardCopy } from '@substrate-system/copy-button/copy'\n\nclipboardCopy('hello copies')\n```\n\n## CSS\nOverride the variables `--success-color` and `--copy-color` to customize the color.\n\n```css\n.copy-button {\n    --success-color: green;\n    --copy-color: blue;\n}\n```\n\n### attributes\n1 required attribute, 1 optional attribute.\n\n#### `payload`\nThe text you want to copy.\n\n```html\n\u003ccopy-button payload=\"example\"\u003e\u003c/copy-button\u003e\n```\n\n#### `duration`\nLength of time in milliseconds that the success checkmark should show.\nDefault is `2000` (2 seconds).\n\n```html\n\u003ccopy-button duration=\"4000\" payload=\"example\"\u003e\u003c/copy-button\u003e\n```\n\n\n--------------------------------------------------------\n\n### Screenshots\n\nCreate a button like this\n\n![screenshot of the button, pre-click](image.png)\n\n-------\n\n![screenshot of the button, post-click](image-1.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubstrate-system%2Fcopy-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsubstrate-system%2Fcopy-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubstrate-system%2Fcopy-button/lists"}