How to install clipboard.js

Created

clipboard.js lets you easily copy text to the clipboard. At 3kb gzipped and no need for Flash, it’s a great lightweight way to allow your visitors to copy bits of text and code on your site.

Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated framework.

Installation

You can download the latest version of clipboard.js from the GitHub releases or use a clipboard.js CDN.

GitHub

Latest:2021-05-19 16:02:21
License:MIT License
Cloning with HTTPS URLs
git clone https://github.com/zenorocha/clipboard.js.git
Cloning with SSH URLs
git clone [email protected]:zenorocha/clipboard.js.git
Cloning with GitHub CLI
gh repo clone zenorocha/clipboard.js

NPM

Version:2.0.8
Publish Time:2021-03-11 04:55:55
Unpacked Size:89.4 kB
Downloading and installing packages locally
npm i clipboard
npm install clipboard
yarn add clipboard
Downloading and installing packages globally
npm i -g clipboard
yarn global add clipboard
Install Specific Version of a Package
npm install [email protected]
Bower
bower install clipboard

For more information about clipboard.js see https://clipboardjs.com/.

Usage

A pretty common use case is to copy content from another element. You can do that by adding a data-clipboard-target attribute in your trigger element.

The value you include on this attribute needs to match another's element selector.

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

Events: - There are cases where you'd like to show some user feedback or capture what has been selected after a copy/cut operation.

That's why we fire custom events such as success and error for you to listen and implement your custom logic.

var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});