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
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})} />
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(
`Options
####
: 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)
: 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
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