Performant , lightweight and dependency free render prop loving copy 2 clipboard component.
Performant and lightweight copy 2 clipboard component for react applications.
react-copy-to-clipboard is very nice but
react-copy-to-clipboard
: 1.7 kBnpm 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: '',
}
}
render() {
return (
<div>
<input value={this.state.value}
onChange={({target: {value}}) => this.setState({value, copied: false})} />
<C2C
text={this.state.value}
render={({ copied, handleClick }) =>
copied
? <span style={{color: 'blue'}}>Copied !</span>
: <button onClick={handleClick}>Copy to clipboard</button>
}
/>
</div>
);
}
}
const container = document.createElement('div');
document.body.appendChild(container);
ReactDOM.render(<App />, container);
text
: PropTypes.string.isRequiredText to be copied to clipboard.
render
: PropTypes.funcRender prop, pass a function that accepts an object with two keys, handleClick
and copied
.
handleClick
should be called when you want copy event to be triggered. This should usually be assigned to an onClick
event as browsers require user action for copy to work.
copied
would be true in case of successful copying.
children
: PropTypes.funcYou can also use children as a function pattern. The signature of this function is identical to that of render prop.
NOTE: Either one of render
or children
props is required and must be of type function
.
options
: PropTypes.shape({debug: bool})Flag that enables logs for debugging.
<C2C text="Hi! 🌟 me">{({ copied, handleClick }) =>
copied
? <span style={{color: 'blue'}}>Copied !</span>
: <button onClick={handleClick}>Copy to 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