Copy-to-clipboard React component
npm install react-copy-to-clipboard



Copy to clipboard React component
Based on 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'
``sh`
npm install --save react-copy-to-clipboard
Don't forget to manually install peer dependencies (react) if you use npm@3.
html
(Module exposed as CopyToClipboard)
`Live design system demo
Simple web demo
http://nkbt.github.io/react-copy-to-clipboard
Codepen demo
http://codepen.io/nkbt/pen/eNPoQv
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 (
onChange={({target: {value}}) => this.setState({value, copied: false})} /> onCopy={() => this.setState({copied: true})}>
Copy to clipboard with span
onCopy={() => 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.isRequiredText to be copied to clipboard
####
onCopy: PropTypes.funcOptional 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 options.
See API docs for details
####
children: PropTypes.node.isRequiredCopyToClipboard 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 startthen
open http://localhost:8080
`Tests
`bash
to run ESLint check
yarn lintto run tests
yarn testto 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
``MIT