Copy-to-clipboard React component
npm install react-copy-to-clipboard-es-class
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 react-copy-to-clipboard
Don't forget to manually install peer dependencies (react) if you use npm@3.
sh
bower install --save https://unpkg.com/react-copy-to-clipboard/bower.zip
`or in
json
{
"dependencies": {
"react-copy-to-clipboard": "https://unpkg.com/react-copy-to-clipboard/bower.zip"
}
}
`then include as
html
`
$3
html
(Module exposed as CopyToClipboard)
`
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 createReactClass from 'create-react-class';
import CopyToClipboard from 'react-copy-to-clipboard';const App = createReactClass({
getInitialState() {
return {value: '', copied: false};
},
render() {
return (
onChange={({target: {value}}) => this.setState({value, copied: false})} />
Copy to clipboard with span
{this.state.copied ? Copied. : null}
);
}
});const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(
`Options
####
: PropTypes.string.isRequiredText to be copied to clipboard
####
onCopy: PropTypes.funcOptional callback, will be called when text is copied
`
onCopy(text, result)
: 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
on OSX and Windows.To run example covering all
CopyToClipboard features, use npm start dev, which will compile src/example/Example.jsbash
git clone git@github.com:nkbt/react-copy-to-clipboard.git
cd react-copy-to-clipboard
npm install
npm start devthen
open http://localhost:8080
`Tests
bash
to run tests
npm start testto generate test coverage (./reports/coverage)
npm start test.covto run end-to-end tests
npm start test.e2e
``MIT