https://github.com/georgegriff/copy-component

A Vanilla web component to wrap copy-able text/html elements and add their inner text to the clipboard.
https://github.com/georgegriff/copy-component

Last synced: about 1 month ago
JSON representation

A Vanilla web component to wrap copy-able text/html elements and add their inner text to the clipboard.

• Host: GitHub
• URL: https://github.com/georgegriff/copy-component
• Owner: Georgegriff
• Created: 2021-12-26T18:57:37.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2021-12-30T16:13:04.000Z (almost 3 years ago)
• Last Synced: 2024-11-10T22:45:33.483Z (about 1 month ago)
• Language: JavaScript
• Size: 35.2 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# copy-component

A Vanilla web component to wrap copy-able text/html elements and add their inner text to the clipboard.



  

    

  



- Zero dependencies

- Browser support: Modern, requires support for Web Component APIs (v1).

- Limitation: In order to ensure that formatting can be copied this component requires you to [wrap your copyable content in a single element)[#limitations].

[Live Demos](https://griffa.dev/demos/copy-component/)

Usage:

```js

// assumes resolving from node_modules or import as a esm module in your html.

import "copy-component";

```

Wrap html elements for example some pre formatted code:

```html

  


  console.log("some code")



  Copy


```

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/G2G221OBA)

## Events

- `copy` - Fired on copy success

- `copy-failed` - Fired on copy failed

```js

document.querySelector("copy-component").addEventListener("copy", () => {

  // do something e.g. change your button text to "Copied"

});

```

## Limitations

In order to preserve the formatting of copied content you must wrap your content you want to copy in single parent dom node i.e.

```html

  


    
Stuff to copy

    


    
Copy me too!

  

  Copy me!


```

NOT

```html

  
Stuff to copy

  


  
Copy me too!

  Copy me!


```

This is due to how shadow dom works, it is not possible to get the formatted inner text of a single slot without also getting the text of the other slots (e.g. the button slot).

## Programmatic API

Because this is a web component it can expose properties on the html element that can be accessed by javascript.

Say you have the following html without a copy button, you could trigger copying via code.

```html

  


  console.log("some code")



```

like so:

```js

await document.querySelector("copy-component").copy();

```

## Load from CDN:

```html

  import copyComponent from "https://cdn.skypack.dev/copy-component";

```

## Use within a static site generator:

TODO