{"id":28518976,"url":"https://github.com/rarar89/copy-code-react","last_synced_at":"2026-02-26T06:03:41.240Z","repository":{"id":281470884,"uuid":"944701997","full_name":"rarar89/copy-code-react","owner":"rarar89","description":"Add copy button to your code blocks automatically","archived":false,"fork":false,"pushed_at":"2025-03-21T07:42:37.000Z","size":475,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-04T10:57:22.982Z","etag":null,"topics":["button","clipboard","code-blocks","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rarar89.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-03-07T20:16:47.000Z","updated_at":"2025-03-21T07:41:37.000Z","dependencies_parsed_at":"2025-07-05T08:32:35.209Z","dependency_job_id":"2da6695a-1cae-4731-bcd9-d33f7ba4a068","html_url":"https://github.com/rarar89/copy-code-react","commit_stats":null,"previous_names":["rarar89/copy-code-react"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/rarar89/copy-code-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rarar89%2Fcopy-code-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rarar89%2Fcopy-code-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rarar89%2Fcopy-code-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rarar89%2Fcopy-code-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rarar89","download_url":"https://codeload.github.com/rarar89/copy-code-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rarar89%2Fcopy-code-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281652196,"owners_count":26538211,"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","status":"online","status_checked_at":"2025-10-29T02:00:06.901Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["button","clipboard","code-blocks","react"],"created_at":"2025-06-09T06:05:49.233Z","updated_at":"2025-10-29T16:12:39.932Z","avatar_url":"https://github.com/rarar89.png","language":"TypeScript","readme":"# Copy Code React\n\nA lightweight React library that automatically adds copy buttons to code blocks to copy code to the clipboard. Customizable options for button position, icons, styling, text and highlighting.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/rarar89/copy-code-react/blob/main/images/copy-code-block.gif?raw=true\" alt=\"Copy Code Demo\" style=\"max-width:300px\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/copy-code-react\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/copy-code-react.svg\" alt=\"npmjs\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/rarar89/copy-code-vue\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Vuejs-library-blue\" alt=\"React version\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://apimimic.com/blog/building-a-crud-application-with-react-and-nextjs/\"\u003e\n    LIVE DEMO\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Installation\n\nInstall using pnpm, npm or yarn\n\n```bash\npnpm install copy-code-react\n```\n\n```bash\nnpm install copy-code-react\n```\n\n```bash\nyarn add copy-code-react\n```\n\n## Usage\n\n### Method 1: Using the CopyCode wrapper Component\n\nThe CopyCode component automatically adds copy buttons to all code blocks within it. This is the simplest way to add copy functionality to specific sections of your app.\n\n```tsx\nimport { CopyCode } from 'copy-code-react';\n\nfunction MyComponent() {\n  return (\n    \u003cCopyCode\u003e\n      \u003cdiv\u003e\n        \u003ch3\u003eExample code block:\u003c/h3\u003e\n        \u003cpre\u003e\u003ccode\u003e\n          {`function hello() {\n            console.log(\"Hello, world!\");\n          }`}\n        \u003c/code\u003e\u003c/pre\u003e\n        \u003cdiv\u003e\n          \u003ch4\u003eExample code block 2:\u003c/h4\u003e\n          \u003cpre\u003e\u003ccode\u003e\n            {`function hello() {\n              console.log(\"Hello, world!\");\n            }`}\n          \u003c/code\u003e\u003c/pre\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/CopyCode\u003e\n  );\n}\n\n```\n\nCopyCode component also works with dangerouslySetInnerHTML:\n\n```tsx\nimport { CopyCode } from 'copy-code-react';\n\nfunction MyComponent() {\n  return (\n    \u003cCopyCode\u003e\n      \u003cdiv dangerouslySetInnerHTML={{ __html: '\u003cpre\u003e\u003ccode\u003econsole.log(\"Hello, world!\");\u003c/code\u003e\u003c/pre\u003e' }} /\u003e\n    \u003c/CopyCode\u003e\n  );\n}\n```\n\nYou can also customize the appearance and behavior of the copy buttons:\n\n```tsx\nimport { CopyCode } from 'copy-code-react';\n\nfunction MyComponent() {\n  return (\n    \u003cCopyCode \n      position=\"bottom-right\" \n      copyMessage=\"Copied!\" \n      highlightOnCopy={true}\n    \u003e\n      {/* Your code blocks here */}\n    \u003c/CopyCode\u003e\n  );\n}\n```\n\n### Method 2: Using the Hook Directly\n\nFor more control, you can use the useCopyCode hook directly in your components. This allows you to target specific sections of your app.\n\n```tsx\n\nimport { useCopyCode } from 'copy-code-react';\nimport { useRef } from 'react';\n\nfunction MyComponent() {\n  // Create a ref to limit the scope of code blocks that will get copy buttons\n  const containerRef = useRef(null);\n  \n  // Apply the hook with custom options\n  useCopyCode(\n    { \n      position: 'top-left',\n      copyMessage: 'Code Copied!',\n      highlightOnCopy: true \n    }, \n    containerRef\n  );\n  \n  return (\n    \u003cdiv ref={containerRef}\u003e\n      \u003cpre\u003e\n        \u003ccode\u003e\n          {`// This code block will have a copy button\nfunction example() {\n  return \"Hello world!\";\n}`}\n        \u003c/code\u003e\n      \u003c/pre\u003e\n    \u003c/div\u003e\n  );\n}\n\n```\nWithout a ref, the hook will apply to all code blocks in the document:\n\n```tsx\nimport { useCopyCode } from 'copy-code-react';\n\nfunction MyComponent() {\n  // Add copy buttons to all code blocks in the document\n  useCopyCode({ \n    selector: 'code',\n  });\n  \n  return (\n    \u003cdiv\u003e\n      {/* Your content */}\n    \u003c/div\u003e\n  );\n}\n```\n\n## Options\nBoth the CopyCode component and useCodeCopy hook accept the following options:\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| selector | string | 'pre code' | CSS selector for code blocks |\n| position | string | 'top-right' | Position of the copy button. Options: 'top-right', 'top-left', 'bottom-right', 'bottom-left' |\n| copyMessage | string | 'Copied' | Message to show after copying |\n| copyMessageTimeout | number | 2000 | Time in milliseconds to show the success message |\n| containerClassName | string | 'react-code-copy-button-container' | Class name for the button container |\n| buttonClassName | string | 'react-code-copy-button' | Class name for the copy button |\n| successClassName | string | 'react-code-copy-success' | Class name for success message |\n| highlightOnCopy | boolean | false | Whether to highlight the code block when copied |\n| customCopyIcon | ReactNode | undefined | Custom JSX element to use instead of the default copy icon |\n| customSuccessIcon | ReactNode | undefined | Custom JSX element to use instead of the default success icon |\n\n## Development\n\n### Running the Demo\n\nTo see the library in action and explore example implementations:\n\n```bash\n# Clone the repository\ngit clone https://github.com/rarar89/copy-code-react.git\ncd copy-code-react\n\n# Install dependencies\nnpm install\n\n# Start the development server\nnpm run dev\n```\n\nThe development server will start, and you can view the examples at `http://localhost:5173` (or the port shown in your terminal).\n\n### Example Implementations\n\nThe repository includes several example implementations in the demo app (`src/App.tsx`). These examples showcase different configurations and use cases for the library.\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## License\n\nMIT\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frarar89%2Fcopy-code-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frarar89%2Fcopy-code-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frarar89%2Fcopy-code-react/lists"}