https://github.com/solodynamo/react-c2c
Performant , lightweight and dependency free render prop loving copy 2 clipboard component.
https://github.com/solodynamo/react-c2c
c2c clipboard copy copy-to-clipboard react to
Last synced: about 1 year ago
JSON representation
Performant , lightweight and dependency free render prop loving copy 2 clipboard component.
- Host: GitHub
- URL: https://github.com/solodynamo/react-c2c
- Owner: solodynamo
- License: mit
- Created: 2018-01-20T17:47:31.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-06T03:50:58.000Z (over 8 years ago)
- Last Synced: 2025-04-20T02:48:58.559Z (about 1 year ago)
- Topics: c2c, clipboard, copy, copy-to-clipboard, react, to
- Language: JavaScript
- Homepage: https://solodynamo.github.io/react-c2c/
- Size: 261 KB
- Stars: 62
- Watchers: 5
- Forks: 7
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
> Performant and lightweight copy 2 clipboard component for react applications.
##### Featured in:
- [React Status](https://react.statuscode.com/issues/72)
- [Hashbang Weekly](http://hashbangweekly.okgrow.com/2018/01/22/issue-52)
- [Stackshare](https://stackshare.io/news/article/283641/performant-lightweight-and-dependency-free-react-copy-2-clipboard-component)
## Highlights
- Can be easily integrated.
- Just ~ **1.4kb**.
- No dependencies.
- Flexible (Uses render prop pattern)
- Configurable for debugging(through logs).
## Comparison
react-copy-to-clipboard is very nice but
- react-c2c: **1.4 kB** 🎉
- [`react-copy-to-clipboard`](https://www.npmjs.com/package/react-copy-to-clipboard): 1.7 kB
## Installation
```sh
npm install --save react-c2c
```
```sh
yarn add react-c2c
```
## Demo
https://solodynamo.github.io/react-c2c/
https://codesandbox.io/s/j314vk3r73
## Usage
```js
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 (
this.setState({value, copied: false})} />
copied
? Copied !
: Copy to clipboard
}
/>
);
}
}
const container = document.createElement('div');
document.body.appendChild(container);
ReactDOM.render(, container);
```
## props
#### `text`: PropTypes.string.isRequired
Text to be copied to clipboard.
#### `render`: PropTypes.func
[Render prop](https://reactjs.org/docs/render-props.html), 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.func
You can also use children as a function [pattern](https://discuss.reactjs.org/t/children-as-a-function-render-callbacks/626). 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.
```js
{({ copied, handleClick }) =>
copied
? Copied !
: Copy to clipboard
}
```
## Support react-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.
## Contribute
Please do 🙂
## License
[MIT](LICENSE) © [Solodynamo](solodynamo.github.io)