<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:
import '@github/clipboard-copy-element'
With a script tag:
<script type="module" src="./node_modules/@github/clipboard-copy-element/dist/index.js">
Markup
<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
<clipboard-copy value="src/index.js">Copy</clipboard-copy>
Element content
<clipboard-copy for="blob-path">Copy</clipboard-copy>
<div id="blob-path">src/index.js</div>
Form input
<clipboard-copy for="blob-path">Copy</clipboard-copy>
<input id="blob-path" value="src/index.js">
Hyperlink href
<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:
document.addEventListener('clipboard-copy', function(event) {
const button = event.target
button.classList.add('highlight')
})
Browser support
Browsers without native custom element support require a polyfill.
- Chrome
- Firefox
- Safari
- Microsoft Edge
Development
npm install
npm test
License
Distributed under the MIT license. See LICENSE for details.