Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-copy-html-to-clipboard
Advanced tools
Readme
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'
npm install --save react react-copy-html-to-clipboard
Don't forget to manually install peer dependencies (react
) if you use npm@3.
bower install --save https://unpkg.com/react-copy-to-clipboard/bower.zip
or in bower.json
{
"dependencies": {
"react-copy-to-clipboard": "https://unpkg.com/react-copy-to-clipboard/bower.zip"
}
}
then include as
<script src="bower_components/react/react.js"></script>
<script src="bower_components/react-copy-to-clipboard/build/react-copy-to-clipboard.js"></script>
<script src="https://unpkg.com/react/dist/react.js"></script>
<script src="https://unpkg.com/react-copy-to-clipboard/build/react-copy-to-clipboard.js"></script>
(Module exposed as `CopyToClipboard`)
http://nkbt.github.io/react-copy-to-clipboard
http://codepen.io/nkbt/pen/eNPoQv
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 (
<div>
<input value={this.state.value}
onChange={({target: {value}}) => this.setState({value, copied: false})} />
<CopyToClipboard text={this.state.value}
onCopy={() => this.setState({copied: true})}>
<span>Copy to clipboard with span</span>
</CopyToClipboard>
<CopyToClipboard text={() => this.state.value}
onCopy={() => this.setState({copied: true})}>
<button>Copy to clipboard with button</button>
</CopyToClipboard>
{this.state.copied ? <span style={{color: 'red'}}>Copied.</span> : null}
</div>
);
}
}
const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);
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.boolTrue - use param text
as html
onlyHtml
: PropTypes.boolTrue - if can't copy html to clipboard, don't try to copy text with alternative ways
canUsePrompt
: PropTypes.boolTrue - 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.
<CopyToClipboard text="Hello!">
<button>Copy text to clipboard</button>
</CopyToClipboard>
<CopyToClipboard text="Hello, <b>I am bold</b>!" options={{asHtml: true}} >
<button>Copy html to clipboard</button>
</CopyToClipboard>
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
git clone git@github.com:nkbt/react-copy-to-clipboard.git
cd react-copy-to-clipboard
npm install
npm start dev
# then
open http://localhost:8080
# to run tests
npm start test
# to generate test coverage (./reports/coverage)
npm start test.cov
# to run end-to-end tests
npm start test.e2e
MIT
FAQs
Copy text/html to clipboard React component
The npm package react-copy-html-to-clipboard receives a total of 475 weekly downloads. As such, react-copy-html-to-clipboard popularity was classified as not popular.
We found that react-copy-html-to-clipboard demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.