Copy text/html to clipboard React component
npm install react-copy-html-to-clipboard





Copy text/html to clipboard React component
Forked from react-copy-to-clipboard
Based on copy-html-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-html-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
bower.json`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 CopyToClipboard from 'react-copy-html-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
this.state.value}
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.any.isRequiredText/html to be copied to clipboard or function returning text/html
####
onCopy: PropTypes.funcOptional callback, will be called when text/html is copied
`
onCopy(text, result)
`
result (bool): Returns true if copied successfully, else false.
####
options: PropTypes.shape({asHtml: bool, onlyHtml: bool, canUsePrompt: bool, debug: bool, message: string})Optional copy-html-to-clipboard options:
######
asHtml: PropTypes.bool
True - use param text as html######
onlyHtml: PropTypes.bool
True - if can't copy html to clipboard, don't try to copy text with alternative ways######
canUsePrompt: PropTypes.bool
True - try alternative ugly prompt-way
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
``js
`Development and testing
Currently is being developed and tested with the latest stable
Node 7 on OSX and Windows.To run example covering all
CopyToClipboard features, use npm start dev, which will compile src/example/Example.js`bash
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