comments-react
TypeScript icon, indicating that this package has built-in type declarations

1.1.4 • Public • Published

Comments-React Module (using Firebase)

Comments module 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"

Contact

If you have any question feel free to contact me on my website 😉 www.meetguillaume.dev

Package Sidebar

Install

npm i comments-react

Weekly Downloads

19

Version

1.1.4

License

MIT

Unpacked Size

57.8 kB

Total Files

7

Last publish

Collaborators

  • guillaumeducuing