<clipboard-copy> element

Copy element text content or input values to the clipboard.

Installation

$ npm install --save clipboard-copy-element

Usage

import '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 copy event is dispatched that can be used to notify the user with confirmation, like a tooltip or button highlight.

document.addEventListener('copy', function(event) {
  const button = document.activeElement
  button.classList.add('highlight')
})

Browser support

Browsers without native custom element support require a polyfill.

• Chrome
• Firefox
• Safari
• Internet Explorer 11
• Microsoft Edge

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.