Comments-react NPM

Comments-React Module (using Firebase)

Comments module

Effortlessly add a robust comment system to your blog or website! 🚀
The Comments-React Module is a lightweight, feature-packed library built with modern tools like React, TypeScript, and Tailwind CSS.
Designed for flexibility and ease of use, it offers a seamless way to manage comments while maintaining control over customization and moderation.

Démonstration GIF

✨ Features

Firebase Integration: All comments are stored securely in Firebase, ensuring scalability and reliability.
Full CRUD Support: Add, edit, or delete your comment with ease.
Smart Moderation: Built-in profanity filtering using the powerful leo-profanity module.
Customizable:
- Support for changing languages and text.
- Change color for button, text(and svg) and background !
- Adjustable character limits to suit your needs.
- Prevent spamming with anti-multi-post protection.
Modern Tech Stack: Built with React, TypeScript, and styled using Tailwind CSS for a clean and responsive UI.

🚀 Quick Start

Installation

Install the package via npm or yarn:

npm install comments-react

Firebase config

this module use firebase config so you have to create an account.(it's free, choose Firestore Database)

const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_APIKEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTHDOMAIN,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECTID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGEBUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGINGSENDERID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APPID,
    measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENTID
  };

1. Add Google Authentication

Google Auth

2. Create collection named "comments" (empty, this module will hydrate it)

Create collection

3. Protect with rules

Rules

Exemple of your component

"use client";

import { Comments } from "comments-react";

const Comment = ({ pageUid, lang }: { pageUid: string, lang: string }) => {
  const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_APIKEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTHDOMAIN,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECTID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGEBUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGINGSENDERID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APPID,
    measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENTID
  };

  return <Comments firebaseConfig={firebaseConfig} pageUid={pageUid} />;
};

export default Comment;

Props

Settings

Property	Types	Default
firebaseConfig	object	firebaseConfig
pageUid	string	pageUid
profanityLanguage	string	"en" (only "en", "fr", "ru")
preventMultiPosts	boolean	true (the user have to wait other comment to post again)
maxChars	number	1000
lang	string	lang (date only)

Style

Property	Types	Default
backgroundColor	string	"#FFFFFF"
textColor	string	"#10172A" (surcharge svg color too)
buttonColor	string	"#232d47"
buttonHoverColor	string	"#10172A"
fontPrim	string	""(override tailwind font)
fontSec	string	"" (override tailwind font)

Texts

texts={{
    placeholder=""
    btnAdd=""
    ....
}}

Property	Types	Default
placeholder	string	"Your comment"
btnAdd	string	"Add a comment"
btnEdit	string	"Edit"
btnCancel	string	"Cancel"
errorCharac	string	"Please do not exceed 1000 characters"
errorAdd	string	"You need to wait for another user to add a comment"
errorUrlAndMail	string	"Please do not include URLs or email addresses"
characLeft	string	"Characters left"
dateAt	string	"at"
dateThe	string	"on"
dateEdit	string	"Edited on"
dateThe	string	"on"
btnModalConfirm	string	"Confirm"
titleModalDelete	string	"Delete this comment"
connexionTitle	string	"Log in to add a comment"
connexionButton	string	"Log in with Google"