# react-copy-to-clipboard [![npm](https://img.shields.io/npm/v/react-copy-to-clipboard.svg?style=flat-square)](https://www.npmjs.com/package/react-copy-to-clipboard) [![Gitter](https://img.shields.io/gitter/room/nkbt/help.svg?style=flat-square)](https://gitter.im/nkbt/help) [![CircleCI](https://img.shields.io/circleci/project/nkbt/react-copy-to-clipboard.svg?style=flat-square&label=nix-build)](https://circleci.com/gh/nkbt/react-copy-to-clipboard) [![Dependencies](https://img.shields.io/david/nkbt/react-copy-to-clipboard.svg?style=flat-square)](https://david-dm.org/nkbt/react-copy-to-clipboard) [![Dev Dependencies](https://img.shields.io/david/dev/nkbt/react-copy-to-clipboard.svg?style=flat-square)](https://david-dm.org/nkbt/react-copy-to-clipboard#info=devDependencies) Copy to clipboard React component Based on [copy-to-clipboard](https://npm.im/copy-to-clipboard) > Would try to use execCommand with fallback to IE specific clipboardData interface and finally, fallback to simple prompt with proper text content & 'Copy to clipboard: Ctrl+C, Enter' ![Copy to clipboard](example/copy-to-clipboard.gif) ## Installation ### NPM ```sh npm install --save react-copy-to-clipboard ``` Don't forget to manually install peer dependencies (`react`) if you use npm@3. ### 1998 Script Tag: ```html (Module exposed as `CopyToClipboard`) ``` ## Live design system demo [https://www.jinno.io/app/18/](https://www.jinno.io/app/18/?source=react-copy-to-clipboard) ## Simple web demo [http://nkbt.github.io/react-copy-to-clipboard](http://nkbt.github.io/react-copy-to-clipboard) ## Codepen demo [http://codepen.io/nkbt/pen/eNPoQv](http://codepen.io/nkbt/pen/eNPoQv?editors=0010) ## Usage ```js import React from 'react'; import ReactDOM from 'react-dom'; import {CopyToClipboard} from 'react-copy-to-clipboard'; class App extends React.Component { state = { value: '', copied: false, }; render() { return (

this.setState({value, copied: false})} /> this.setState({copied: true})}> Copy to clipboard with span this.setState({copied: true})}> {this.state.copied ? Copied. : null}

); } } const appRoot = document.createElement('div'); document.body.appendChild(appRoot); ReactDOM.render(, appRoot); ``` ## Options #### `text`: PropTypes.string.isRequired Text to be copied to clipboard #### `onCopy`: PropTypes.func Optional callback, will be called when text is copied ``` onCopy(text, result) ``` `result (bool)`: Returns `true` if copied successfully, else `false`. #### `options`: PropTypes.shape({debug: bool, message: string}) Optional [copy-to-clipboard](https://npm.im/copy-to-clipboard) options. See [API docs](https://npm.im/copy-to-clipboard#api) for details #### `children`: PropTypes.node.isRequired CopyToClipboard is a simple wrapping component, it does not render any tags, so it requires the only child element to be present, which will be used to capture clicks. ```js ``` ## Development and testing Currently is being developed and tested with the latest stable `Node 8` on `OSX`. To run example covering all `CopyToClipboard` features, use `yarn start`, which will compile `example/Example.js` ```bash git clone git@github.com:nkbt/react-copy-to-clipboard.git cd react-copy-to-clipboard yarn install yarn start # then open http://localhost:8080 ``` ## Tests ```bash # to run ESLint check yarn lint # to run tests yarn test # to run end-to-end tests # first, run `selenium/standalone-firefox:3.4.0` docker image docker run -p 4444:4444 selenium/standalone-firefox:3.4.0 # then run test yarn e2e ``` ## License MIT

	Stars	Issues	Version	Updated	Created
clipboard-js	914	11	0.3.6	7 years ago	9 years ago
clipboardy	1,737	15	4.0.0	7 months ago	7 years ago
copy-to-clipboard			3.3.3	a year ago	9 years ago
react-clipboard	53	2	1.3.2	7 years ago	10 years ago
react-copy-to-clipboard			5.1.0	2 years ago	9 years ago

clipboard-js vs clipboardy vs copy-to-clipboard vs react-clipboard vs react-copy-to-clipboard

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past