Package Exports
- react-copy-to-clipboard
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-copy-to-clipboard) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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'
Installation
npm
npm install --save react-copy-to-clipboardbower
bower install --save react-copy-to-clipboardUsage
import React from 'react';
import CopyToClipboard from 'react-copy-to-clipboard';
const App = React.createClass({
getInitialState() {
return {value: '', copied: false};
},
render() {
return (
<div>
<input value={this.state.value}
onChange={({target: {value}}) => this.setState({value, copied: false})} />
<CopyToClipboard text={this.state.value}
onCopy={() => this.setState({copied: true})}>
Copy to clipboard
</CopyToClipboard>
{this.state.copied ? <span style={{color: 'red'}}>Copied.</span> : null}
</div>
);
}
});
React.render(<App />, document.body);Options
text: React.PropTypes.string.isRequired
Text to be copied to clipboard
onCopy: React.PropTypes.func
Optional callback, will be called when text is copied
children
CopyToClipboard renders <button> element, so you can add some inline elements into it (like <span> or just text).
<CopyToClipboard text="Hello!">
<span>Copy to clipboard</span>
</CopyToClipboard>Development and testing
To run comprehensive example covering all InFlux features, use npm start, which will compile src/example/Example.js
git clone git@github.com:nkbt/react-copy-to-clipboard.git
cd react-copy-to-clipboard
npm install
npm start
# then
open http://localhost:8080Demo
http://nkbt.github.io/react-copy-to-clipboard/example
Codepen demo
http://codepen.io/nkbt/pen/eNPoQv
Tests
npm test
# to run tests in watch mode for development
npm run test:dev
# to generate test coverage (./reports/coverage)
npm run test:covLicense
MIT