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: about 1 month 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 (over 6 years ago)
- Default Branch: main
- Last Pushed: 2024-09-18T20:41:36.000Z (about 2 months ago)
- Last Synced: 2024-09-27T05:09:38.228Z (about 2 months ago)
- Topics: custom-elements, web-components
- Language: JavaScript
- Homepage: https://github.github.io/clipboard-copy-element/examples/
- Size: 1.17 MB
- Stars: 462
- Watchers: 278
- Forks: 263
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: CODEOWNERS
Awesome Lists containing this project
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.