copy-to-clipboard

What is copy-to-clipboard?

The copy-to-clipboard package is a simple and versatile tool for copying text to the clipboard in web applications. It provides an easy-to-use API that works across different browsers and platforms, making it a popular choice for developers looking to implement copy functionality without dealing with the complexities of the Clipboard API directly.

What are copy-to-clipboard's main functionalities?

Copy text to clipboard

This feature allows you to copy a specified string of text to the user's clipboard. It's useful for copying content like URLs, codes, or any text content that users might want to use outside the web application.

copy('Text to be copied');

Copy with options

This feature enhances the basic copy functionality by allowing you to pass an options object. The 'debug' option enables console output for debugging, and the 'message' option allows you to customize the instruction message shown to users on how to copy when automatic copying fails (useful for older browsers).

copy('Text to be copied', { debug: true, message: 'Press #{key} to copy' });

Other packages similar to copy-to-clipboard

clipboard

The 'clipboard' package offers similar functionality to 'copy-to-clipboard' but with a broader feature set, including support for cutting text and copying from specific elements. It's a more comprehensive solution that requires a bit more setup but provides greater flexibility for complex applications.

clipboardy

Designed for Node.js applications, 'clipboardy' enables copying and pasting to the clipboard in both desktop and CLI environments. Unlike 'copy-to-clipboard', which is focused on web applications, 'clipboardy' is versatile for server-side and command-line scripts, making it suitable for a different context of use.

README

Copy to clipboard

Simple module exposing copy function that will try to use execCommand with fallback to IE-specific clipboardData interface and finally, resort to usual prompt with proper text content and message.

Example

import copy from 'copy-to-clipboard';

copy('Text');

// Copy with options
copy('Text', {
  debug: true,
  message: 'Press #{key} to copy',
});

API

copy(text: string, options: object): boolean — tries to copy text to clipboard. Returns true if no additional keystrokes were required from user (so, execCommand, IE's clipboardData worked) or false.

Value	Default	Notes
options.debug	false	Boolean. Optional. Enable output to console.
options.message	Copy to clipboard: #{key}, Enter	String. Optional. Prompt message. *
options.format	"text/html"	String. Optional. Set the MIME type of what you want to copy as. Use text/html to copy as HTML, text/plain to avoid inherited styles showing when pasted into rich text editor.

* all occurrences of #{key} are replaced with ⌘+C for macOS/iOS users, and Ctrl+C otherwise.

Browser support

Works everywhere where prompt* is available. Works best (i.e. without additional keystrokes) in Chrome, FF, Safari 10+, and, supposedly, IE/Edge.

Note: does not work on some older iOS devices.
* – even though Safari 8 has prompt, you cannot specify prefilled content for prompt modal – thus it doesn't work as expected.

Installation

• Can be used as npm package and then leveraged using commonjs bundler/loader:

npm i --save copy-to-clipboard

• Can be utilized using wzrd.in. Add following script to your page:

<script src="https://wzrd.in/standalone/copy-to-clipboard@latest" async></script>

You will have window.copyToClipboard exposed for you to use.

UI components based on this package:

• react-copy-to-clipboard
• copy-button

See also:

• clipboard-copy by @feross
• MDN
• April 2015 update on Cut and Copy Commands

Running Tests

This project has some automated tests, that will run using nightwatch on top of selenium.

npm i
npm test

Typescript

This library has built-in Typescript definitions.

import * as copy from 'copy-to-clipboard';