{"id":20855965,"url":"https://github.com/solodynamo/react-c2c","last_synced_at":"2025-05-12T06:31:27.087Z","repository":{"id":53867296,"uuid":"118266398","full_name":"solodynamo/react-c2c","owner":"solodynamo","description":"Performant , lightweight and dependency free render prop loving copy 2 clipboard component.","archived":false,"fork":false,"pushed_at":"2018-02-06T03:50:58.000Z","size":267,"stargazers_count":62,"open_issues_count":3,"forks_count":7,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-20T02:48:58.559Z","etag":null,"topics":["c2c","clipboard","copy","copy-to-clipboard","react","to"],"latest_commit_sha":null,"homepage":"https://solodynamo.github.io/react-c2c/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/solodynamo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-20T17:47:31.000Z","updated_at":"2024-02-02T22:55:45.000Z","dependencies_parsed_at":"2022-08-24T12:10:43.487Z","dependency_job_id":null,"html_url":"https://github.com/solodynamo/react-c2c","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solodynamo%2Freact-c2c","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solodynamo%2Freact-c2c/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solodynamo%2Freact-c2c/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solodynamo%2Freact-c2c/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/solodynamo","download_url":"https://codeload.github.com/solodynamo/react-c2c/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253687533,"owners_count":21947693,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["c2c","clipboard","copy","copy-to-clipboard","react","to"],"created_at":"2024-11-18T04:27:31.528Z","updated_at":"2025-05-12T06:31:26.651Z","avatar_url":"https://github.com/solodynamo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n    \u003cbr\u003e\n    \u003cimg width=\"400\" src=\"https://github.com/solodynamo/react-c2c/blob/master/media/logo.png\" alt=\"react-c2c\"\u003e\n    \u003cbr\u003e\n    \u003cbr\u003e\n    \u003cbr\u003e\n\u003c/h1\u003e\n\n\u003e Performant and lightweight copy 2 clipboard component for react applications.\n\n##### Featured in:\n- [React Status](https://react.statuscode.com/issues/72)\n- [Hashbang Weekly](http://hashbangweekly.okgrow.com/2018/01/22/issue-52)\n- [Stackshare](https://stackshare.io/news/article/283641/performant-lightweight-and-dependency-free-react-copy-2-clipboard-component)\n\n## Highlights\n\n- Can be easily integrated.\n- Just ~ **1.4kb**.\n- No dependencies.\n- Flexible (Uses render prop pattern)\n- Configurable for debugging(through logs).\n\n## Comparison\nreact-copy-to-clipboard is very nice but\n- react-c2c: **1.4 kB** 🎉\n- [`react-copy-to-clipboard`](https://www.npmjs.com/package/react-copy-to-clipboard): 1.7 kB\n\n## Installation\n\n```sh\nnpm install --save react-c2c\n```\n```sh\nyarn add react-c2c\n```\n\n## Demo\nhttps://solodynamo.github.io/react-c2c/\n\nhttps://codesandbox.io/s/j314vk3r73\n\n## Usage\n```js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {C2C} from 'react-c2c';\n\nclass App extends React.Component {\n\n    constructor(props) {\n        super(props);\n        this.state = {\n            value: '',\n        }\n    }\n\n    render() {\n        return (\n          \u003cdiv\u003e\n            \u003cinput value={this.state.value}\n              onChange={({target: {value}}) =\u003e this.setState({value, copied: false})} /\u003e\n\n            \u003cC2C\n              text={this.state.value}\n              render={({ copied, handleClick }) =\u003e\n                copied\n                  ? \u003cspan style={{color: 'blue'}}\u003eCopied !\u003c/span\u003e\n                  : \u003cbutton onClick={handleClick}\u003eCopy to clipboard\u003c/button\u003e\n              }\n            /\u003e\n\n\n          \u003c/div\u003e\n        );\n    }\n}\n\nconst container = document.createElement('div');\ndocument.body.appendChild(container);\nReactDOM.render(\u003cApp /\u003e, container);\n```\n## props\n\n\n#### `text`: PropTypes.string.isRequired\n\nText to be copied to clipboard.\n\n\n#### `render`: PropTypes.func\n\n[Render prop](https://reactjs.org/docs/render-props.html), pass a function that accepts an object with two keys, `handleClick` and `copied`.\n\n* `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.\n\n* `copied` would be true in case of successful copying.\n\n#### `children`: PropTypes.func\n\nYou 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.\n\n**NOTE: Either one of `render` or `children` props is required and must be of type `function`.**\n\n#### `options`: PropTypes.shape({debug: bool})\n\nFlag that enables logs for debugging.\n\n\n```js\n\u003cC2C text=\"Hi! 🌟 me\"\u003e{({ copied, handleClick }) =\u003e\n  copied\n    ? \u003cspan style={{color: 'blue'}}\u003eCopied !\u003c/span\u003e\n    : \u003cbutton onClick={handleClick}\u003eCopy to clipboard\u003c/button\u003e\n}\u003c/C2C\u003e\n```\n\n## Support react-c2c\n\nreact-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.\n\n## Contribute\n\nPlease do 🙂\n\n## License\n\n[MIT](LICENSE) © [Solodynamo](solodynamo.github.io)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolodynamo%2Freact-c2c","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsolodynamo%2Freact-c2c","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolodynamo%2Freact-c2c/lists"}