https://github.com/github/clipboard-copy-element

Copy element text content or input values to the clipboard.
https://github.com/github/clipboard-copy-element

custom-elements web-components

Last synced: 4 months ago
JSON representation

Copy element text content or input values to the clipboard.

• Host: GitHub
• URL: https://github.com/github/clipboard-copy-element
• Owner: github
• License: mit
• Created: 2018-02-27T22:21:36.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2024-02-23T04:16:59.000Z (4 months ago)
• Last Synced: 2024-03-06T06:53:10.932Z (4 months ago)
• Topics: custom-elements, web-components
• Language: JavaScript
• Homepage: https://github.github.io/clipboard-copy-element/examples/
• Size: 919 KB
• Stars: 441
• Watchers: 255
• Forks: 245
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Codeowners: CODEOWNERS

Lists

• awesome-standalones - `<clipboard-copy>`
• awesome-stars - clipboard-copy-element
• awesome-stars - github/clipboard-copy-element - Copy element text content or input values to the clipboard. (JavaScript)
• awesome-stars - github/clipboard-copy-element - Copy element text content or input values to the clipboard. (JavaScript)

README

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

```js

import '@github/clipboard-copy-element'

```

With a script tag:

```html

```

### Markup

```html

<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

```html

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

```

### Element content

```html

<clipboard-copy for="blob-path">Copy</clipboard-copy>

<div id="blob-path">src/index.js</div>

```

### Form input

```html

<clipboard-copy for="blob-path">Copy</clipboard-copy>

<input id="blob-path" value="src/index.js">

```

### Hyperlink href

```html

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

```js

document.addEventListener('clipboard-copy', function(event) {

  const button = event.target

  button.classList.add('highlight')

})

```

## Browser support

Browsers without native [custom element support][support] require a [polyfill][].

- Chrome

- Firefox

- Safari

- Microsoft Edge

[support]: https://caniuse.com/#feat=custom-elementsv1

[polyfill]: https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements

## Development

```

npm install

npm test

```

## License

Distributed under the MIT license. See LICENSE for details.