{"id":23260423,"url":"https://github.com/paulmuenzner/react-comment-component-ts","last_synced_at":"2026-04-08T16:31:01.187Z","repository":{"id":221027839,"uuid":"753244440","full_name":"paulmuenzner/react-comment-component-ts","owner":"paulmuenzner","description":"Strongly typed, handcrafted, flexible and robust commenting solution designed exclusively for React applications.","archived":false,"fork":false,"pushed_at":"2024-03-05T11:17:06.000Z","size":215,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-19T10:55:14.727Z","etag":null,"topics":["blogging","comment-system","next","react","reactjs","tsx","typescript","ui","vite"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/paulmuenzner.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","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}},"created_at":"2024-02-05T18:40:01.000Z","updated_at":"2024-06-05T14:08:36.000Z","dependencies_parsed_at":"2025-04-06T05:27:31.088Z","dependency_job_id":"0d6315c0-9294-4025-9bfc-0fb38b36c8c9","html_url":"https://github.com/paulmuenzner/react-comment-component-ts","commit_stats":null,"previous_names":["paulmuenzner/react-comment-component-ts"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/paulmuenzner/react-comment-component-ts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paulmuenzner%2Freact-comment-component-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paulmuenzner%2Freact-comment-component-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paulmuenzner%2Freact-comment-component-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paulmuenzner%2Freact-comment-component-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/paulmuenzner","download_url":"https://codeload.github.com/paulmuenzner/react-comment-component-ts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paulmuenzner%2Freact-comment-component-ts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31564772,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":["blogging","comment-system","next","react","reactjs","tsx","typescript","ui","vite"],"created_at":"2024-12-19T13:16:53.729Z","updated_at":"2026-04-08T16:31:01.170Z","avatar_url":"https://github.com/paulmuenzner.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\n\n\n\u003c!-- PROJECT SHIELDS --\u003e\n\u003c!--\n*** https://www.markdownguide.org/basic-syntax/#reference-style-links\n--\u003e\n\u003c!-- [![Golang][golang-shield]][golang-url] --\u003e\n[![Codacy Badge](https://app.codacy.com/project/badge/Grade/7003be3d0ea5476e98760cb305c2b424)](https://app.codacy.com/gh/paulmuenzner/react-comment-component-ts/dashboard?utm_source=gh\u0026utm_medium=referral\u0026utm_content=\u0026utm_campaign=Badge_grade)\n[![Issues][issues-shield]][issues-url]\n[![React][react-shield]](https://reactjs.org/)\n[![TypeScript][ts-shield]](https://www.typescriptlang.org/)\n[![GNU License][license-shield]][license-url]\n![GitHub repo size](https://img.shields.io/github/repo-size/paulmuenzner/react-comment-component-ts) \n[![paulmuenzner github][github-shield]][github-url] \n[![Contributors][contributors-shield]][contributors-url]\n \u003c!-- [![paulmuenzner.com][website-shield]][website-url] --\u003e\n\n\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/paulmuenzner/react-comment-component-ts\"\u003e\n    \u003cimg src=\"public/logo.png\" alt=\"Logo\" width=\"128\" height=\"128\"\u003e\n  \u003c/a\u003e\n\n  \u003ch3 align=\"center\"\u003eReact TS Comment Component\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n    Votes - Pagination - ReactPortal Modal\n    \u003cbr /\u003e\n    \u003ca href=\"#about-the-project\"\u003e\u003cstrong\u003eEXPLORE DOCS\u003c/strong\u003e\u003c/a\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"#settings\"\u003eHigh Flexibility\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/paulmuenzner/react-comment-component-ts/issues\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/paulmuenzner/react-comment-component-ts/issues\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\n![Header](public/react-ts-comment-component-paul-muenzner.png)\n\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003col\u003e\n    \u003cli\u003e\u003ca href=\"#about-the-project\"\u003eAbout The Project\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#features\"\u003eFeatures\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#demo\"\u003eDemo\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#getting-started\"\u003eGetting Started\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#settings\"\u003eSettings\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#roadmap\"\u003eRoadmap\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#contributing\"\u003eContributing\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#contact\"\u003eContact\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#acknowledgments\"\u003eAcknowledgments\u003c/a\u003e\u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e\n\n\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n## About The Project\n\nThis handcrafted React Comment Component stands out as a robust and highly customizable commenting solution specifically crafted for React applications. Notably, it is fortified with strongly typed TypeScript, ensuring a solid and reliable foundation. What sets this component apart is its unique integration within a Vite project, allowing users to effortlessly extract it from 'src/component/comment'. This approach offers unparalleled flexibility and simplifies the customization process, setting it apart from conventional black-box packages.\n\nIn the landscape of open-source internet solutions, the React Comment Component addresses a noticeable gap by providing a comprehensive and flexible commenting system. Many existing options fall short in delivering a satisfying balance of style and functionality. This React Comment Component fills this void, offering users an all-encompassing solution that addresses common limitations found in other open-source comment components. Its adaptability and ease of integration make it a standout choice for React developers who seek a robust and highly customizable commenting solution.\n\n\n## Features\n\n-   **Super Clean Design**: Enjoy a sleek and intuitive user interface, providing an elegant commenting experience.\n\n-   **Flexibility at Its Core**: Customize the component effortlessly by defining maximum character limits for each input field.\n\n-   **Voting System**: Enable or disable upvoting and downvoting functionality with the flexibility to control the counter update and disable specific voting options. Configure the display of top and bottom comment buttons and change button text seamlessly via the settings in `settings.tsx`.\n\n-   **Modal Form with React Portal**: Enhance security with a modal form for adding and answering comments, implemented using React Portal.\n\n-   **Input Validation**: Ensure data integrity with input validations such as character limits, email validation, and prevention of special characters.\n\n-   **Pagination Configuration**: Tailor the number of parent comments displayed per page by configuring the maximum number in the settings.\n\n-   **Threaded Comments**: Enable answering of parent comments in the first level, with answers displayed in the second level and indented for clarity.\n\n-   **Dynamic Date Display**: Dynamically present the age of comments, ranging from seconds for comments less than a minute old to days for comments older than 5 days. Dates older than 5 days are displayed in the US date format.\n\n-   **Character Counter**: Provide users with a character counter in the comment field for easy reference.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n### Tech Stack \u003ca name=\"tech-stack\"\u003e\u003c/a\u003e\n\nThis project is basically built with and for:\n\n*   [![React][react-shield]](https://reactjs.org/)\n*   [![TypeScript][ts-shield]](https://www.typescriptlang.org/)\n*   [![Vite][vite-shield]](https://vitejs.dev/)\n*   [![Styled Components][styled-components-shield]](https://styled-components.com/)\n\n\n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\u003c!-- GETTING STARTED --\u003e\n## Demo\n\nhttps://www.paulmuenzner.com/demos/comment\n\n\n\n\n\u003c!-- GETTING STARTED --\u003e\n## Getting Started\n\n### Option 1\n\n1. Extract the component from 'src/component/comment' into your project.\n\n2. Configure the component with your desired settings in `settings.tsx`.\n\n3. Integrate the component into your React application for a feature-rich commenting experience.\n\n### Option 2\n\n1. Download as zip or clone this project\n ```sh\n git clone https://github.com/paulmuenzner/react-comment-component-ts.git\n ```\n2. Navigate to the project directory\n```sh\ncd react-comment-component-ts\n```\n3. Install dependencies using npm \n ```sh\n npm install\n ```\nor using yarn\n ```sh\n yarn\n ```\n3. Run project\n ```sh\n npm run dev\n ```\nor using yarn\n ```sh\n yarn dev\n ```\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\n\n\u003c!-- Settings --\u003e\n## Settings\n\nThis React Comment Component offers a variety of customizable settings to tailor the behavior and appearance of the comment system. These settings can be found in the 'src/component/comment' directory in the 'settings.tsx' file. Here's an overview of the available settings:\n\n### Define Max Allowed Characters for Comment Fields\n\n- **maxCharsName:** Defines the maximum allowed characters for the commenter's name. Default: 20\n- **maxCharsEmail:** Defines the maximum allowed characters for the commenter's email. Default: 30\n- **maxCharsWebsite:** Defines the maximum allowed characters for the commenter's website. Default: 40\n- **maxCharsComment:** Defines the maximum allowed characters for the comment content. Default: 1000\n\n### Further Settings\n\n- **allowUpVoting:** Enables or disables the upvoting functionality for comments. Default: true\n- **allowDownVoting:** Enables or disables the downvoting functionality for comments. Default: true\n- **allowCommentButtonTop:** Enables or disables the comment button at the top of the comments section. Default: true\n- **allowCommentButtonBottom:** Enables or disables the comment button at the bottom of the comments section. Default: true\n\n### Change \u0026 Define Descriptions\n\n- **textButtonTop:** Defines the text for the comment button at the top of the comments section. Default: 'WRITE COMMENT'\n- **textButtonBottom:** Defines the text for the comment button at the bottom of the comments section. Default: 'WRITE COMMENT'\n\n### Miscellaneous\n\n- **maxMainCommentsPerPaginationUnit:** Defines the maximum number of parent comments per pagination unit. Default: 2\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\u003c!-- ROADMAP --\u003e\n## Roadmap\n\n-   ✅ Configure maximum number of comments per pagination page\n-   ✅ Colorize vote buttons on hover\n-   ✅ Only one vote per comment and user. Preventing multiple comment votes.\n-   ⬜️ Add captcha\n-   ⬜️ Implement Testing\n-   ⬜️ Replace 'react-icons' package with local scg solution\n-   ⬜️ Add option to collapse nested comments\n\n\n\nSee the [open issues](https://github.com/paulmuenzner/react-comment-component-ts/issues) to report bugs or request fatures.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\n\u003c!-- CONTRIBUTING --\u003e\n## Contributing\n\nContributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\nContributions are more than welcome! See [CONTRIBUTING.md](CONTRIBUTING.md) for\nmore info.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\n\u003c!-- LICENSE --\u003e\n## License\n\nDistributed under the GNU General Public License v2.0. See [LICENSE](LICENSE.txt) for more information.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\n\u003c!-- CONTACT --\u003e\n## Contact\n\nPaul Münzner: [https://paulmuenzner.com](https://paulmuenzner.com) \n\nProject Link: [https://github.com/paulmuenzner/react-comment-component-ts](https://github.com/paulmuenzner/react-comment-component-ts)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\n\u003c!-- ACKNOWLEDGMENTS --\u003e\n## Acknowledgments\n\nUse this space to list resources you find helpful and would like to give credit to. I've included a few of my favorites to kick things off!\n\n*   [Vite](https://vitejs.dev/)\n*   [React](https://react.dev/)\n*   [Styled Components](https://styled-components.com/)\n*   [Typescript](https://www.typescriptlang.org/)\n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\n\u003c!-- MARKDOWN LINKS \u0026 IMAGES --\u003e\n\u003c!-- https://www.markdownguide.org/basic-syntax/#reference-style-links --\u003e\n[github-shield]: https://img.shields.io/badge/paulmuenzner-black.svg?logo=github\u0026logoColor=ffffff\u0026colorB=000000\n[github-url]: https://github.com/paulmuenzner\n[contributors-shield]: https://img.shields.io/github/contributors/paulmuenzner/react-comment-component-ts.svg\n[contributors-url]: https://github.com/paulmuenzner/react-comment-component-ts/graphs/contributors\n[issues-shield]: https://img.shields.io/github/issues/paulmuenzner/react-comment-component-ts.svg\n[issues-url]: https://github.com/paulmuenzner/react-comment-component-ts/issues\n[license-shield]: https://img.shields.io/badge/license-GPL_2.0-orange.svg?colorB=FF5733\n[license-url]: https://github.com/paulmuenzner/react-comment-component-ts/blob/master/LICENSE.txt\n[react-shield]: https://img.shields.io/badge/React-18.2.0-61DAFB?logo=react\u0026logoColor=white\n[ts-shield]: https://img.shields.io/badge/TypeScript-5.2.2-007ACC?logo=typescript\u0026logoColor=white\n[vite-shield]: https://img.shields.io/badge/Vite-5.0.8-646CFF?logo=vite\u0026logoColor=white\n[styled-components-shield]: https://img.shields.io/badge/Styled%20Components-5.3.1-DB7093?logo=styled-components\u0026logoColor=white\n\u003c!-- [website-shield]: https://img.shields.io/badge/www-paulmuenzner.com-blue\n[website-url]: https://paulmuenzner.com --\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaulmuenzner%2Freact-comment-component-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpaulmuenzner%2Freact-comment-component-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaulmuenzner%2Freact-comment-component-ts/lists"}