Copy element text content or input values to the clipboard.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
Simon Taranto 8fe03ef973
Merge pull request #56 from github/dependabot/npm_and_yarn/got-11.8.5
6 days ago
.devcontainer Add a .devcontainer 4 months ago
.github/workflows Create .github/workflows/publish.yml 3 months ago
examples Fix typo in example page texts 1 year ago
src Add back HTMLElementTagNameMap defs 2 years ago
test configure karma to use chromium 5 months ago
.eslintrc.json Include recommended rules 2 years ago
.gitignore <clipboard-copy> 4 years ago
CODEOWNERS Create CODEOWWNERS 2 years ago
LICENSE <clipboard-copy> 4 years ago
README.md Update link to polyfill 2 years ago
package-lock.json Bump got from 11.8.3 to 11.8.5 6 days ago
package.json Bump karma from 5.0.9 to 6.3.16 3 months ago
rollup.config.js Convert to TypeScript 2 years ago
tsconfig.json Convert to TypeScript 2 years ago

README.md

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