Performant and lightweight copy 2 clipboard component for react applications.
- Can be easily integrated.
- Just ~ 1.4kb.
- No dependencies.
- Configurable for debugging(through logs).
react-copy-to-clipboard is very nice but
- react-c2c: 1.4 kB ๐
react-copy-to-clipboard
: 1.7 kB
npm install --save react-c2c
yarn add react-c2c
https://solodynamo.github.io/react-c2c/
https://codesandbox.io/s/j314vk3r73
import React from 'react';
import ReactDOM from 'react-dom';
import {C2C} from 'react-c2c';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
value: '',
copied: false,
}
}
render() {
return (
<div>
<input value={this.state.value}
onChange={({target: {value}}) => this.setState({value, copied: false})} />
<C2C text={this.state.value}
onCopy={() => this.setState({copied: true})}>
<button>Copy to clipboard with button</button>
</C2C>
{this.state.copied ? <span style={{color: 'blue'}}>Copied !</span> : null}
</div>
);
}
}
const container = document.createElement('div');
document.body.appendChild(container);
ReactDOM.render(<App />, container);
Text to be copied to clipboard.
Optional callback, will be called when text is copied.
onCopy(text, result)
result (boolean)
: Returns true
if copied successfully, else false
.
Flag that enables logs for debugging.
C2C is a simple wrapping component, so it requires a single child element to be present, which will be used to capture clicks.
<C2C text="Hi! ๐ me">
<button>Copy 2 Clipboard</button>
</C2C>
react-c2c is completely free and open-source. If you find it useful, you can show your support by ๐ it or sharing it in your social network.
Please do ๐
MIT ยฉ Solodynamo