React TS Comment Component

Votes - Pagination - ReactPortal Modal
EXPLORE DOCS

High Flexibility · Report Bug · Request Feature

Table of Contents

1. About The Project
2. Features
3. Demo
4. Getting Started
5. Settings
6. Roadmap
7. Contributing
8. License
9. Contact
10. Acknowledgments

About The Project

This 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.

In 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.

Features

• Super Clean Design: Enjoy a sleek and intuitive user interface, providing an elegant commenting experience.

• Flexibility at Its Core: Customize the component effortlessly by defining maximum character limits for each input field.

• 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.

• Modal Form with React Portal: Enhance security with a modal form for adding and answering comments, implemented using React Portal.

• Input Validation: Ensure data integrity with input validations such as character limits, email validation, and prevention of special characters.

• Pagination Configuration: Tailor the number of parent comments displayed per page by configuring the maximum number in the settings.

• Threaded Comments: Enable answering of parent comments in the first level, with answers displayed in the second level and indented for clarity.

• 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.

• Character Counter: Provide users with a character counter in the comment field for easy reference.

(back to top)

Tech Stack

This project is basically built with and for:

• 
• 
• 
• 

(back to top)

Demo

https://www.paulmuenzner.com/demos/comment

Getting Started

Option 1

1. Extract the component from 'src/component/comment' into your project.

2. Configure the component with your desired settings in settings.tsx.

3. Integrate the component into your React application for a feature-rich commenting experience.

Option 2

1. Download as zip or clone this project

git clone https://github.com/paulmuenzner/react-comment-component-ts.git

2. Navigate to the project directory

cd react-comment-component-ts

3. Install dependencies using npm

npm install

or using yarn

yarn

3. Run project

npm run dev

or using yarn

yarn dev

(back to top)

Settings

This 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:

Define Max Allowed Characters for Comment Fields

• maxCharsName: Defines the maximum allowed characters for the commenter's name. Default: 20
• maxCharsEmail: Defines the maximum allowed characters for the commenter's email. Default: 30
• maxCharsWebsite: Defines the maximum allowed characters for the commenter's website. Default: 40
• maxCharsComment: Defines the maximum allowed characters for the comment content. Default: 1000

Further Settings

• allowUpVoting: Enables or disables the upvoting functionality for comments. Default: true
• allowDownVoting: Enables or disables the downvoting functionality for comments. Default: true
• allowCommentButtonTop: Enables or disables the comment button at the top of the comments section. Default: true
• allowCommentButtonBottom: Enables or disables the comment button at the bottom of the comments section. Default: true

Change & Define Descriptions

• textButtonTop: Defines the text for the comment button at the top of the comments section. Default: 'WRITE COMMENT'
• textButtonBottom: Defines the text for the comment button at the bottom of the comments section. Default: 'WRITE COMMENT'

Miscellaneous

• maxMainCommentsPerPaginationUnit: Defines the maximum number of parent comments per pagination unit. Default: 2

(back to top)

Roadmap

• ✅ Configure maximum number of comments per pagination page
• ✅ Colorize vote buttons on hover
• ✅ Only one vote per comment and user. Preventing multiple comment votes.
• ⬜️ Add captcha
• ⬜️ Implement Testing
• ⬜️ Replace 'react-icons' package with local scg solution
• ⬜️ Add option to collapse nested comments

See the open issues to report bugs or request fatures.

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

Contributions are more than welcome! See CONTRIBUTING.md for more info.

(back to top)

License

Distributed under the GNU General Public License v2.0. See LICENSE for more information.

(back to top)

Contact

Paul Münzner: https://paulmuenzner.com

Project Link: https://github.com/paulmuenzner/react-comment-component-ts

(back to top)

Acknowledgments

Use 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!

• Vite
• React
• Styled Components
• Typescript

(back to top)