custom-notification-bell

🔔 NotificationBell

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

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");
      }}
    />
  );
}