DEV Community

Cover image for simple-copy.js a tiny lib for copy text and DOM
Guilherme Nascimento
Guilherme Nascimento

Posted on

simple-copy.js a tiny lib for copy text and DOM

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

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:

<script src="https://cdn.jsdelivr.net/npm/simple-copy.js@0.5/simple-copy.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

And use with require():

const SimpleCopy = require('simple-copy.js');
Enter fullscreen mode Exit fullscreen mode

Or use with ECMAScript modules:

import SimpleCopy from 'simple-copy.js'
Enter fullscreen mode Exit fullscreen mode

Usage

Copying content from a element using selector:

SimpleCopy.copy("<selector>");
Enter fullscreen mode Exit fullscreen mode

Copying text from a element using selector:

SimpleCopy.copy("<selector>", { "text": true });
Enter fullscreen mode Exit fullscreen mode

Copying entire element using selector:

SimpleCopy.copy("<selector>", { "node": true });
Enter fullscreen mode Exit fullscreen mode

Copying content from a element using selector:

var element = document.querySelector(".foobar");
SimpleCopy.copy(element);
Enter fullscreen mode Exit fullscreen mode

Copying text from a element using selector:

var element = document.getElementById("idelement");
SimpleCopy.copy(element, { "text": true });
Enter fullscreen mode Exit fullscreen mode

Copying entire element:

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

Select text in a element using selector:

SimpleCopy.select("<selector>");
Enter fullscreen mode Exit fullscreen mode

Select content in a element:

var element = document.querySelector(".foobar");
SimpleCopy.select(element);
Enter fullscreen mode Exit fullscreen mode

Select entire node:

var element = document.querySelector(".foobar");
SimpleCopy.select(element, { "node": true });
Enter fullscreen mode Exit fullscreen mode

Set text in clipboard:

SimpleCopy.data("Hello, world!");
Enter fullscreen mode Exit fullscreen mode

Copy content from element defined in data attributes:

<button data-simplecopy-target="<selector>">Copy</button>
Enter fullscreen mode Exit fullscreen mode

Copy entire element defined in data attributes:

<button data-simplecopy-target="<selector>" data-simplecopy-node="true">Copy</button>
Enter fullscreen mode Exit fullscreen mode

Select content from element defined in data attributes:

<button data-simplecopy-target="<selector>" data-simplecopy-select="true">Select text</button>
Enter fullscreen mode Exit fullscreen mode

Copy html content without format:

<button data-simplecopy-target="<selector>" data-simplecopy-text="true">Copy</button>
Enter fullscreen mode Exit fullscreen mode

Set text in clipboard by data attribute:

<button data-simplecopy-data="Hello, world!">Copy text</button>
Enter fullscreen mode Exit fullscreen mode

Browser Support

Chrome Firefox Opera Edge Safari IE9+
10+ ✔ 9+ ✔

Top comments (0)