<clipboard-copy> element
Copy element text content or input values to the clipboard.
Installation
$ npm install --save @github/clipboard-copy-element
Usage
import '@github/clipboard-copy-element'<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.
Assets
2
- Merge pull request #18 from github/add-typescript-definition-file f2902b3
- Merge branch 'master' into add-typescript-definition-file 3fe5fc9
- set a name for the UMD bundle ece9825
- default export class in flow definition file 4e47911
- export ClipboardCopyElement by default da30301
- reference typescript file in package.json 3847935
- add typescript definition file 4b345c1
Assets
2
<clipboard-copy> element
Copy element text content or input values to the clipboard.
Installation
$ npm install --save @github/clipboard-copy-element
Usage
import '@github/clipboard-copy-element'<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.
Assets
2
Package has been renamed to include the @github scope. You can now find it at https://www.npmjs.com/package/@github/clipboard-copy-element on npm.
Assets
2
PreviousNext