custom-notification-bell/README.md

A customizable notification bell component

# 🔔 NotificationBell

[![npm version](https://img.shields.io/npm/v/custom-notification-bell.svg?style=flat-square)](https://www.npmjs.com/package/custom-notification-bell)
[![npm downloads](https://img.shields.io/npm/dm/custom-notification-bell.svg?style=flat-square)](https://www.npmjs.com/package/custom-notification-bell)
[![license](https://img.shields.io/github/license/your-username/your-repo.svg?style=flat-square)](LICENSE)

A reusable React notification bell component for **real-time notifications** via WebSocket and REST API.  
Designed to be framework-agnostic: no hardcoded navigation — you decide what happens when users click notifications.

---

## 🚀 Features

- 📡 **Real-time updates** via WebSocket  
- 📥 **Fetch past notifications** via REST API  
- 🎨 **Customizable icon & theme**  
- ⚡ **Lightweight, no extra dependencies**  
- 🛠️ **Pluggable navigation** (`onNotificationClick`, `onSeeAllClick`)  

---

## 📦 Installation

```bash
npm install custom-notification-bell
# or
yarn add custom-notification-bell

##  Usage

import { NotificationBell } from "custom-notification-bell";
import { BiBell } from "react-icons/bi";
import { useNavigate } from "react-router-dom";

export default function App() {
  const navigate = useNavigate();

  return (
    <NotificationBell
      websocketUrl="https://your-websocket-endpoint"
      apiUrl="https://your-api/notification"
      bellIcon={<BiBell size={15} />}
      userId="user-123"
      theme="dark"
      showConnectionStatus={true}
      onNotificationClick={(notification) => {
        // 🔹 Host app controls navigation
        if (notification.type === "comment") {
          navigate(`/reviews/${notification.relatedEntity?.id}`);
        } else {
          navigate("/notifications");
        }
      }}
      onSeeAllClick={() => {
        navigate("/notifications");
      }}
    />
  );
}