Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/github/clipboard-copy-element
Copy element text content or input values to the clipboard.
https://github.com/github/clipboard-copy-element
custom-elements web-components
Last synced: 4 days ago
JSON representation
Copy element text content or input values to the clipboard.
- Host: GitHub
- URL: https://github.com/github/clipboard-copy-element
- Owner: github
- License: mit
- Created: 2018-02-27T22:21:36.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2024-10-11T05:57:23.000Z (2 months ago)
- Last Synced: 2024-10-29T14:54:56.035Z (about 2 months ago)
- Topics: custom-elements, web-components
- Language: JavaScript
- Homepage: https://github.github.io/clipboard-copy-element/examples/
- Size: 1.26 MB
- Stars: 461
- Watchers: 279
- Forks: 263
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: CODEOWNERS
Awesome Lists containing this project
- awesome-standalones - `<clipboard-copy>`
README
# <clipboard-copy> element
Copy element text content or input values to the clipboard.
## Installation
```
$ npm install --save @github/clipboard-copy-element
```
## Usage
### Script
Import as ES modules:
```js
import '@github/clipboard-copy-element'
```
With a script tag:
```html
```
### Markup
```html
<clipboard-copy for="blob-path" class="btn btn-sm BtnGroup-item">
Copy path
</clipboard-copy>
<div id="blob-path">src/index.js</div>
```
## Data sources
### Attribute
```html
<clipboard-copy value="src/index.js">Copy</clipboard-copy>
```
### Element content
```html
<clipboard-copy for="blob-path">Copy</clipboard-copy>
<div id="blob-path">src/index.js</div>
```
### Form input
```html
<clipboard-copy for="blob-path">Copy</clipboard-copy>
<input id="blob-path" value="src/index.js">
```
### Hyperlink href
```html
<clipboard-copy for="blob-path">Copy full URL</clipboard-copy>
<a id="blob-path" href="/path/to#my-blob">Link text will not be copied</a>
```
## Events
After copying to the clipboard, a `clipboard-copy` event is dispatched from
the `<clipboard-copy>` element:
```js
document.addEventListener('clipboard-copy', function(event) {
const button = event.target
button.classList.add('highlight')
})
```
## Browser support
Browsers without native [custom element support][support] require a [polyfill][].
- Chrome
- Firefox
- Safari
- Microsoft Edge
[support]: https://caniuse.com/#feat=custom-elementsv1
[polyfill]: https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements
## Development
```
npm install
npm test
```
## License
Distributed under the MIT license. See LICENSE for details.