{"id":21905673,"url":"https://github.com/ninsau/react-coderenderer","last_synced_at":"2026-02-08T16:31:00.864Z","repository":{"id":257803226,"uuid":"864334308","full_name":"ninsau/react-coderenderer","owner":"ninsau","description":"A lightweight and customizable code rendering component for React, supporting syntax highlighting, dark mode, and copy functionality.","archived":false,"fork":false,"pushed_at":"2024-09-29T01:56:28.000Z","size":38,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-07T11:19:29.111Z","etag":null,"topics":["code-renderer","code-snippets","nextjs","react-coderenderer","reactjs","reusable-components","syntax-highlighter"],"latest_commit_sha":null,"homepage":"https://nextjs-reusables.vercel.app/react-coderenderer","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"0bsd","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ninsau.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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}},"created_at":"2024-09-28T00:49:49.000Z","updated_at":"2024-09-29T01:56:31.000Z","dependencies_parsed_at":"2024-11-28T16:46:01.585Z","dependency_job_id":null,"html_url":"https://github.com/ninsau/react-coderenderer","commit_stats":null,"previous_names":["ninsau/react-coderenderer"],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/ninsau/react-coderenderer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninsau%2Freact-coderenderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninsau%2Freact-coderenderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninsau%2Freact-coderenderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninsau%2Freact-coderenderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ninsau","download_url":"https://codeload.github.com/ninsau/react-coderenderer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninsau%2Freact-coderenderer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29236898,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-08T14:18:14.570Z","status":"ssl_error","status_checked_at":"2026-02-08T14:18:14.071Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["code-renderer","code-snippets","nextjs","react-coderenderer","reactjs","reusable-components","syntax-highlighter"],"created_at":"2024-11-28T16:35:10.514Z","updated_at":"2026-02-08T16:31:00.850Z","avatar_url":"https://github.com/ninsau.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-coderenderer\n\nA flexible and customizable code rendering component for React applications, supporting syntax highlighting, dark mode, and copy functionality. This package allows developers to easily embed code blocks into their React applications with a clean interface and minimal setup.\n\n## See the [Examples](https://nextjs-reusables.vercel.app/react-coderenderer)\n\n\u003c!-- [![NPM](https://img.shields.io/npm/v/react-coderenderer.svg)](https://www.npmjs.com/package/react-coderenderer)\n[![Downloads](https://img.shields.io/npm/dt/react-coderenderer.svg)](https://www.npmjs.com/package/react-coderenderer)\n[![License](https://img.shields.io/npm/l/react-coderenderer.svg)](https://www.npmjs.com/package/react-coderenderer) --\u003e\n\n## Table of Contents\n\n- [Features](#features)\n- [Prerequisites](#prerequisites)\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Basic Example](#basic-example)\n  - [Props](#props)\n  - [Opting Out of Default Styles](#opting-out-of-default-styles)\n- [Contributing](#contributing)\n- [Versioning](#versioning)\n- [License](#license)\n- [Code of Conduct](#code-of-conduct)\n- [Acknowledgments](#acknowledgments)\n\n## Features\n\n- **Syntax Highlighting**: Automatically highlights code using `react-syntax-highlighter`.\n- **Copy to Clipboard**: Provides an integrated copy button to copy code snippets.\n- **Dark Mode Support**: Built-in support for light and dark modes.\n- **Customizable**: Opt-out of default Tailwind CSS styles and apply your own custom styles.\n- **Smooth Transitions**: Animate between code previews and actual code with smooth transitions.\n- **Optimized for React**: Designed specifically for React applications with full TypeScript support.\n\n## Prerequisites\n\nMake sure you have a working React environment. This package assumes you are using:\n\n- **React 18 or later**\n- **React-DOM 18 or later**\n\n## Installation\n\nInstall the package via npm:\n\n```bash\nnpm install react-coderenderer\n```\n\nOr via yarn:\n\n```bash\nyarn add react-coderenderer\n```\n\n## Usage\n\nImport the `CodeRenderer` into your React component:\n\n```tsx\nimport React from \"react\";\nimport { CodeRenderer } from \"react-coderenderer\";\nimport \"react-coderenderer/dist/index.css\"; // Import default styles\n```\n\nPass the required props to the `CodeRenderer` component:\n\n```tsx\n\u003cCodeRenderer code={code}\u003e\n  \u003cMyComponent /\u003e\n\u003c/CodeRenderer\u003e\n```\n\n### Basic Example\n\nHere's a basic example of how to use the `CodeRenderer` component:\n\n```tsx\nimport React from \"react\";\nimport { CodeRenderer } from \"react-coderenderer\";\nimport \"react-coderenderer/dist/index.css\"; // Import default styles\n\nconst code = `\nimport React from 'react';\n\nfunction MyComponent() {\n  return (\n    \u003cdiv className=\"p-4 border\"\u003e\n        \u003ch2 className=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\"\u003eMy Custom Component\u003c/h2\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default MyComponent;\n`;\n\nconst BasicCodeRenderer: React.FC = () =\u003e {\n  return (\n    \u003cCodeRenderer code={code}\u003e\n      \u003cdiv className=\"p-4 border\"\u003e\n        \u003ch2 className=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\"\u003e\n          My Custom Component\n        \u003c/h2\u003e\n      \u003c/div\u003e\n    \u003c/CodeRenderer\u003e\n  );\n};\n\nexport default BasicCodeRenderer;\n```\n\n### Props\n\nThe `CodeRenderer` component accepts the following props:\n\n### Props\n\n| Prop                   | Type        | Required | Description                                                                    |\n| ---------------------- | ----------- | -------- | ------------------------------------------------------------------------------ |\n| `code`                 | `string`    | Yes      | The code to display inside the code block.                                     |\n| `children`             | `ReactNode` | Yes      | The content to display when the \"Preview\" button is selected.                  |\n| `disableDefaultStyles` | `boolean`   | No       | Disables default Tailwind CSS styles if set to `true`.                         |\n| `customClassNames`     | `object`    | No       | Custom class names for various elements (e.g., container, button, code block). |\n| `enableDarkMode`       | `boolean`   | No       | Enables dark mode for the code block.                                          |\n\n### Opting Out of Default Styles\n\nIf you prefer to use your own styling or are not using Tailwind CSS in your project, you can opt-out of the default styles provided by the package. Here's how:\n\n1. **Do Not Import the Default CSS**\n\n```tsx\n// import \"react-coderenderer/dist/index.css\"; // Do not import this\n```\n\n2. Set disableDefaultStyles to true\n\nPass the `disableDefaultStyles` prop to the `CodeRenderer`:\n\n```tsx\n\u003cCodeRenderer\n  code={code}\n  disableDefaultStyles={true}\n  customClassNames={{\n    container: \"my-custom-container\",\n    buttonGroup: \"my-custom-button-group\",\n    button: \"my-custom-button\",\n    copyButton: \"my-custom-copy-button\",\n    codeBlock: \"my-custom-code-block\",\n  }}\n\u003e\n  \u003cMyComponent /\u003e\n\u003c/CodeRenderer\u003e\n```\n\n3. Provide Custom Class Names (Optional)\n\nIf you want to apply your own styles, you can pass custom class names via the `customClassNames` prop. This allows you to fully customize the appearance of the component.\n\n```tsx\nimport React from \"react\";\nimport { CodeRenderer } from \"react-coderenderer\";\nimport \"./my-custom-styles.css\"; // Your custom styles\n\nconst exampleCode = `\nimport React from 'react';\nconst HelloWorld = () =\u003e \u003cdiv\u003eHello, World!\u003c/div\u003e;\n`;\n\nconst MyComponent = () =\u003e \u003cdiv\u003eHello, World!\u003c/div\u003e;\n\nconst Example = () =\u003e (\n  \u003cCodeRenderer\n    code={exampleCode}\n    disableDefaultStyles={true}\n    customClassNames={{\n      container: \"my-custom-container\",\n      buttonGroup: \"my-custom-button-group\",\n      button: \"my-custom-button\",\n      copyButton: \"my-custom-copy-button\",\n      codeBlock: \"my-custom-code-block\",\n    }}\n  \u003e\n    \u003cMyComponent /\u003e\n  \u003c/CodeRenderer\u003e\n);\n\nexport default Example;\n```\n\n## Contributing\n\nContributions are welcome! If you'd like to contribute to this project, please follow these steps:\n\n1. Fork the repository.\n2. Create a new feature branch (`git checkout -b feature/your-feature-name`).\n3. Commit your changes (`git commit -m \"Add your message\"`).\n4. Push to the branch (`git push origin feature/your-feature-name`).\n5. Create a pull request detailing your changes.\n\nPlease ensure your code adheres to the project's coding standards and includes relevant tests if necessary. For more information, see [CONTRIBUTING.md](CONTRIBUTING.md).\n\n## Versioning\n\nWe use [Semantic Versioning](https://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/ninsau/react-coderenderer/tags).\n\nTo bump the version, update the `version` field in `package.json` and follow the guidelines in the [CONTRIBUTING.md](CONTRIBUTING.md) file.\n\n## License\n\nThis project is licensed under the ISC License - see the [LICENSE](LICENSE) file for details.\n\n## Code of Conduct\n\nThis project adheres to the [Contributor Covenant Code of Conduct](https://www.contributor-covenant.org/version/2/0/code_of_conduct/). By participating, you are expected to uphold this code. Please report unacceptable behavior to [INSERT EMAIL HERE].\n\n## Acknowledgments\n\n- Inspired by common code rendering and highlighting patterns in React applications.\n- Thanks to all contributors and users for their support.\n- A special shout-out to the open-source community for providing tools and inspiration for this project.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fninsau%2Freact-coderenderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fninsau%2Freact-coderenderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fninsau%2Freact-coderenderer/lists"}