<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:

1import '@github/clipboard-copy-element'

With a script tag:

1<script type="module" src="./node_modules/@github/clipboard-copy-element/dist/index.js">

Markup

1<clipboard-copy for="blob-path" class="btn btn-sm BtnGroup-item">
2  Copy path
3</clipboard-copy>
4<div id="blob-path">src/index.js</div>

Data sources

Attribute

1<clipboard-copy value="src/index.js">Copy</clipboard-copy>

Element content

1<clipboard-copy for="blob-path">Copy</clipboard-copy>
2<div id="blob-path">src/index.js</div>

Form input

1<clipboard-copy for="blob-path">Copy</clipboard-copy>
2<input id="blob-path" value="src/index.js">

Hyperlink href

1<clipboard-copy for="blob-path">Copy full URL</clipboard-copy>
2<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:

1document.addEventListener('clipboard-copy', function(event) {
2  const button = event.target
3  button.classList.add('highlight')
4})

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.