Copy element text content or input values to the clipboard.

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

Install

Link to this version
ImportedReleased 22 April 2019MIT License
Framework Support
Browser Independent
Install with
npm install clipboard-copy-element"@1.0.0"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.0.0

Dependencies