simple-copy.js a tiny lib for copy text and DOM
Tags: javascript, clipboard
Published: 2021-02-04 00:38:35

I've used some great clipboard libs, however I found that occasionally most of the things I needed were something simple, I noticed this when seeing the work of other developers, who instead of using a lib made use of the basics that the API for browsers provides, the `document.execDocument()` (although considered [obsolete](https://w3c.github.io/editing/docs/execCommand/#execcommand())).

What I realized is that a big problem (at least for me) is that although libraries are small and make use of Gzip compression, on servers disabled for this feature it ended up being something that should weigh on average ~2KB ended up becoming ~10KB (I mean separate libs), I understand perfectly that there are compression and minification strategies (which I always use) and even some "lazyload" feature, but in this process I needed something that was light, without depending on much planning.

I admit that at the beginning I didn't think about sharing the lib prototype, but it was interesting enough, when used on servers with GZip enabled, lib got ~1,2KB, when GZip disabled it got ~2,5KB, that is, that is, a minimal difference (~1KB).

> I am working so that the lib in the future will use ClipboardAPI while maintaining backward compatibility for older browsers.

## Configure

You can use CDN (jsdelivr) and put directly in your page:

``` javascript
<script src="https://cdn.jsdelivr.net/npm/simple-copy.js@0.5/simple-copy.min.js"></script>
```

Can download from source: https://github.com/brcontainer/simple-copy.js/blob/0.5.2/simple-copy.min.js

Can too install using npm:

```
npm i simple-copy.js
```

And use with `require()`:

``` javascript
const SimpleCopy = require('simple-copy.js');
```

Or use with ECMAScript modules:

``` javascript
import SimpleCopy from 'simple-copy.js'
```

## Usage

Copying content from a element using selector:

``` javascript
SimpleCopy.copy("<selector>");
```

Copying text from a element using selector:

``` javascript
SimpleCopy.copy("<selector>", { "text": true });
```

Copying entire element using selector:

``` javascript
SimpleCopy.copy("<selector>", { "node": true });
```

Copying content from a element using selector:

``` javascript
var element = document.querySelector(".foobar");
SimpleCopy.copy(element);
```

Copying text from a element using selector:

``` javascript
var element = document.getElementById("idelement");
SimpleCopy.copy(element, { "text": true });
```

Copying entire element:

``` javascript
var element = document.getElementsByClassName("<class>");
SimpleCopy.copy(element[0], { "node": true });
```

Select text in a element using selector:

``` javascript
SimpleCopy.select("<selector>");
```

Select content in a element:

``` javascript
var element = document.querySelector(".foobar");
SimpleCopy.select(element);
```

Select entire node:

``` javascript
var element = document.querySelector(".foobar");
SimpleCopy.select(element, { "node": true });
```

Set text in clipboard:

``` javascript
SimpleCopy.data("Hello, world!");
```

Copy content from element defined in data attributes:

``` html
<button data-simplecopy-target="<selector>">Copy</button>
```

Copy entire element defined in data attributes:

``` html
<button data-simplecopy-target="<selector>" data-simplecopy-node="true">Copy</button>
```

Select content from element defined in data attributes:

``` html
<button data-simplecopy-target="<selector>" data-simplecopy-select="true">Select text</button>
```

Copy html content without format:

``` html
<button data-simplecopy-target="<selector>" data-simplecopy-text="true">Copy</button>
```

Set text in clipboard by data attribute:

``` html
<button data-simplecopy-data="Hello, world!">Copy text</button>
```

## Browser Support

![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![IE9+](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png)
--- | --- | --- | --- | --- | ---
✔ | ✔ | ✔ | ✔ | 10+ ✔ | 9+ ✔