react-copy-to-clipboard
Advanced tools
Package description
The react-copy-to-clipboard package provides a simple React component and hook to copy text to the clipboard. It leverages the Clipboard API and provides an easy-to-use interface for copying text within React applications.
CopyToClipboard Component
This feature provides a React component that can wrap any element (like a button) to enable copying text to the clipboard when the element is clicked. The 'text' prop is the text to be copied, and the 'onCopy' prop is a callback function that is triggered after the text is copied.
{"<CopyToClipboard text={'Text to copy'} onCopy={() => console.log('Copied!')}><button>Copy to Clipboard</button></CopyToClipboard>"}useCopyToClipboard Hook
This feature provides a React hook that can be used in functional components to copy text to the clipboard. The hook returns a copied state and a setCopied function that can be called with the text to be copied.
{"const [copied, setCopied] = useCopyToClipboard();\n<button onClick={() => setCopied('Text to copy')}>Copy to Clipboard</button>"}This is a minimalist copy-to-clipboard module that can be used with or without React. It does not provide a React component or hook, but it can be easily integrated into any event handler or function.
This package is a non-React-specific utility that allows copying to the clipboard. It can be used in any JavaScript application and provides a simple function call to copy text.
Clipboard.js is a popular library for copying text to the clipboard. It can be used with or without React and provides more features than react-copy-to-clipboard, such as copying from a 'cut' action and handling multiple elements.
Readme
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'
npm install --save react-copy-to-clipboard
Don't forget to manually install peer dependencies (react) if you use npm@3.
<script src="https://unpkg.com/react@16.0.0/umd/react.production.min.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-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.string.isRequiredText to be copied to clipboard
onCopy: PropTypes.funcOptional callback, will be called when text is copied
onCopy(text, result)
result (bool): 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.
<CopyToClipboard text="Hello!">
<button>Copy to clipboard</button>
</CopyToClipboard>
Currently is being developed and tested with the latest stable Node 8 on OSX.
To run example covering all CopyToClipboard features, use yarn start, which will compile example/Example.js
git clone git@github.com:nkbt/react-copy-to-clipboard.git
cd react-copy-to-clipboard
yarn install
yarn start
# then
open http://localhost:8080
# to run ESLint check
yarn lint
# to run tests
yarn test
# to run end-to-end tests
# first, run `selenium/standalone-firefox:3.4.0` docker image
docker run -p 4444:4444 selenium/standalone-firefox:3.4.0
# then run test
yarn e2e
MIT
FAQs
Copy-to-clipboard React component
The npm package react-copy-to-clipboard receives a total of 940,661 weekly downloads. As such, react-copy-to-clipboard popularity was classified as popular.
We found that react-copy-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
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.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.