CommunePro

A modern, customizable comment section component for React applications. AddComment provides a seamless commenting experience with features like nested replies, real-time updates, and dark mode support.

View Demo • Documentation •

✨ Features

• Real-time Updates: Instant comment synchronization using Supabase
• Dark Mode: Built-in support for light, dark, and system themes
• Nested Replies: Support for threaded conversations
• Responsive Design: Mobile-first approach for all screen sizes
• Easy Integration: Simple setup with minimal configuration

📦 Installation

# Using npm
npm install addcomment

# Using pnpm
pnpm install addcomment

🚀 Quick Start

1. Import the component and styles:

import { CommentSection } from 'addcomment';
import 'addcomment/dist/styles.css';

2. Add the component to your React application:

function App() {
  return (
    <CommentSection
      apiKey="your-supabase-api-key"
      userId="user-123"
      theme="light" // or "dark" or "auto"
    />
  );
}

⚙️ Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | apiKey | string | Required | Your Supabase API key | | userId | string | Required | Unique identifier for the current user | | theme | string | "light" | UI theme ("light", "dark", or "auto") | | maxDepth | number | 3 | Maximum depth for nested replies | | allowImages | boolean | false | Enable image uploads in comments |

🔧 Advanced Usage

Custom Styling

Override default styles by targeting specific CSS classes:

.addcomment-container {
  /* Your custom styles */
}

.addcomment-input {
  /* Your custom styles */
}

Event Handlers

<CommentSection
  onCommentSubmit={(comment) => {
    console.log('New comment:', comment);
  }}
  onReplySubmit={(reply) => {
    console.log('New reply:', reply);
  }}
/>

📚 Documentation

For detailed documentation, visit our documentation site.

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.

📧 Support

Have questions? Contact us:

• Email: [email protected]

Made with ❤️ by Rushikesh Nimkar