<clipboard-copy> element

Copy element text content or input values to the clipboard.

Installation

$ npm install --save @github/clipboard-copy-element

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

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

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

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

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

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')
})

Browsers without native custom element support require a polyfill.

npm install
npm test

Distributed under the MIT license. See LICENSE for details.

Type	Name	Latest commit message	Commit time
	Failed to load latest commit information.
	.github/workflows
	examples
	src
	test
	.eslintrc.json
	.gitignore
	CODEOWNERS
	LICENSE
	README.md
	package-lock.json
	package.json
	rollup.config.js
	tsconfig.json