[d565449] | 1 | # Copy to clipboard [![Build Status](https://travis-ci.org/sudodoki/copy-to-clipboard.svg?branch=master)](https://travis-ci.org/sudodoki/copy-to-clipboard)
|
---|
| 2 |
|
---|
| 3 | Simple module exposing `copy` function that will try to use [execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand#) with fallback to IE-specific `clipboardData` interface and finally, resort to usual `prompt` with proper text content and message.
|
---|
| 4 |
|
---|
| 5 | > If you are building using [Electron](http://electronjs.org/), use [their API](https://www.electronjs.org/docs/api/clipboard).
|
---|
| 6 |
|
---|
| 7 | # Example
|
---|
| 8 |
|
---|
| 9 | ```js
|
---|
| 10 | import copy from 'copy-to-clipboard';
|
---|
| 11 |
|
---|
| 12 | copy('Text');
|
---|
| 13 |
|
---|
| 14 | // Copy with options
|
---|
| 15 | copy('Text', {
|
---|
| 16 | debug: true,
|
---|
| 17 | message: 'Press #{key} to copy',
|
---|
| 18 | });
|
---|
| 19 | ```
|
---|
| 20 |
|
---|
| 21 | # API
|
---|
| 22 |
|
---|
| 23 | `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`.
|
---|
| 24 |
|
---|
| 25 | |Value |Default |Notes|
|
---|
| 26 | |------|--------|-----|
|
---|
| 27 | |options.debug |false| `Boolean`. Optional. Enable output to console. |
|
---|
| 28 | |options.message|Copy to clipboard: `#{key}`, Enter| `String`. Optional. Prompt message. `*` |
|
---|
| 29 | |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. |
|
---|
| 30 | |options.onCopy|null| `function onCopy(clipboardData: object): void`. Optional. Receives the clipboardData element for adding custom behavior such as additional formats |
|
---|
| 31 |
|
---|
| 32 | `*` all occurrences of `#{key}` are replaced with `⌘+C` for macOS/iOS users, and `Ctrl+C` otherwise.
|
---|
| 33 |
|
---|
| 34 | # [Browser support](http://caniuse.com/#feat=document-execcommand)
|
---|
| 35 |
|
---|
| 36 | Works everywhere where `prompt`* is available. Works best (i.e. without additional keystrokes) in Chrome, FF, Safari 10+, and, supposedly, IE/Edge.
|
---|
| 37 |
|
---|
| 38 | Note: **does not work on some older iOS devices.**
|
---|
| 39 | `*` – even though **Safari 8** has `prompt`, you cannot specify prefilled content for prompt modal – thus it **doesn't work** as expected.
|
---|
| 40 |
|
---|
| 41 | # Installation
|
---|
| 42 |
|
---|
| 43 | + Can be used as npm package and then leveraged using commonjs bundler/loader:
|
---|
| 44 | ```
|
---|
| 45 | npm i --save copy-to-clipboard
|
---|
| 46 | ```
|
---|
| 47 | + Can be utilized using [wzrd.in](https://wzrd.in/). Add following script to your page:
|
---|
| 48 | ```html
|
---|
| 49 | <script src="https://wzrd.in/standalone/copy-to-clipboard@latest" async></script>
|
---|
| 50 | ```
|
---|
| 51 | You will have `window.copyToClipboard` exposed for you to use.
|
---|
| 52 |
|
---|
| 53 | # UI components based on this package:
|
---|
| 54 | + [react-copy-to-clipboard](https://github.com/nkbt/react-copy-to-clipboard)
|
---|
| 55 | + [copy-button](https://github.com/sudodoki/copy-button)
|
---|
| 56 |
|
---|
| 57 | # See also:
|
---|
| 58 | + [clipboard-copy](https://github.com/feross/clipboard-copy) by [@feross](https://github.com/feross)
|
---|
| 59 | + [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand#Browser_Compatibility)
|
---|
| 60 | + [April 2015 update on Cut and Copy Commands](http://updates.html5rocks.com/2015/04/cut-and-copy-commands)
|
---|
| 61 |
|
---|
| 62 | # Running Tests
|
---|
| 63 | This project has some automated tests, that will run using [nightwatch](nightwatchjs.org) on top of [selenium](http://www.seleniumhq.org/).
|
---|
| 64 |
|
---|
| 65 | ```
|
---|
| 66 | npm i
|
---|
| 67 | npm test
|
---|
| 68 | ```
|
---|
| 69 | # Typescript
|
---|
| 70 | This library has built-in Typescript definitions.
|
---|
| 71 |
|
---|
| 72 | ```
|
---|
| 73 | import * as copy from 'copy-to-clipboard';
|
---|
| 74 | ```
|
---|