Arifa Notifications

Note: The notification bell icon turns green when the WebSocket is connected and red when disconnected.

A React notification component with WebSocket support for real-time notifications from Arifa.
Allows developers to easily integrate notifications in any React app and fully control how notifications are rendered.

Features

• Real-time notifications via WebSocket
• Fully headless: you control rendering of messages
• Unread indicators and notification sounds
• Flexible: works with any data shape (object, array, or custom)
• Easy to integrate in React apps

Installation

npm install arifa-notifications react-icons

Peer dependencies: React and ReactDOM (>= 18.0.0)

Usage

import React from "react";
import { ArifaNotification } from "arifa-notifications";
import "arifa-notifications/styles/arifa-notification.css";
import "arifa-notifications/styles/notification-dropdown.css";

export default function App() {
  return (
    <div>
      <h1>My App</h1>

      <ArifaNotification
        apikey="YOUR_API_KEY"
        userID="USER_ID"
        path="YOUR FULL NOTIFICATIONS PAGE PATH"
        soundUrl="" // path to your bell ring file or leave blank
        dropdownClassName="my-dropdown"
        headerClassName="my-header"
        titleClassName="my-title"
        closeButtonClassName="my-close-btn"
        contentClassName="my-content"
        emptyStateClassName="my-empty"
        footerClassName="my-footer"
        viewAllClassName="my-view-all"
        poweredByClassName="my-powered-by"
        poweredByLinkClassName="my-powered-by-link"
      >
        {(data) => (
          <div>
            {data.map((item: any, i: number) => (
              <NotificationCard key={i} payload={item} />
            ))}
          </div>
        )}
      </ArifaNotification>
    </div>
  );
}

Props

Customizing Styles

You can control every style of the dropdown by passing custom class names via the props above. Tip: If your custom styles are not applied due to default CSS specificity, use !important in your CSS rules.

| Prop | Type | Required | Description | | ------------------------ | -------------------------- | -------- | --------------------------------------------------------- | | apikey | string | ✅ | Your Arifa API key | | userID | string | ✅ | User ID to receive notifications | | path | string | ✅ | Path to your full notifications page | | soundUrl | string | ❌ | Optional notification sound URL (/ring.mp3 by default) | | children | (data: any) => ReactNode | ✅ | Function to render notifications (data can be any type) | | dropdownClassName | string | ❌ | Root container class for the dropdown | | headerClassName | string | ❌ | Class for the header row | | titleClassName | string | ❌ | Class for the "Notifications" title text | | closeButtonClassName | string | ❌ | Class for the close button | | contentClassName | string | ❌ | Class for the notifications content/list container | | emptyStateClassName | string | ❌ | Class for the empty state when there are no notifications | | footerClassName | string | ❌ | Class for the footer row | | viewAllClassName | string | ❌ | Class for the "View All Notifications" link | | poweredByClassName | string | ❌ | Class for the powered by wrapper | | poweredByLinkClassName | string | ❌ | Class for the powered by anchor link |