Arifa SDK – Powering RealTime Experiences

Deliver instant events and notifications with arifa-client and arifa-notifications.
Reliable, flexible, and easy to integrate into web or mobile apps.

Overview

Everything you need to send, receive, and display notifications in real time.

ArifaClient SDK

JavaScript/TypeScript client SDK for Arifa Realtime Event Service.
Allows you to connect via WebSocket, listen to events, and send Events using HTTP.

Installation

npm install arifa-client

or using Yarn:

yarn add arifa-client

Usage

Import and Initialize

import ArifaClient from "arifa-client";

const client = new ArifaClient({
  apiKey: "YOUR_API_KEY",
  client: "web", // "web" or "mobile"
});

Listen to Connection State

client.onConnectionChange((state) => {
  console.log("Connection state:", state); // "connected" or "disconnected"
});

Subscribe Recipient

Note: Recipient must be UUID

const sub = client.subscribe("RECIPIENT_UUID");

// Listen for events
sub.listen((event) => {
  console.log("Received event:", event);
});

// Unsubscribe when done
sub.unsubscribe();

Send a Event/Notification/Data

const res = await client.notify({
  recipient: "RECIPIENT_UUID",
  payload: {
    title: "Hello",
    message: "Welcome to Arifa!",
  }, // Can be any JSON data
  origin: "https://your-registered-domain.com", // Optional, use if web
  client: "web", // Optional, "web" or "mobile"
});

console.log(res);

• recipient → UUID of the user

• payload→ Any JSON object

• orign→ Optional string; typically your registered domain when sending from web.

• client → Optional, "web" or "mobile"

Note: The notify method returns a result object with the notification status. Example responses:

• "sent" → Notification successfully sent to a connected user

• "User offline, notification saved" → User is offline; the message was stored for later delivery

• "Failed to send/save notification" → There was an error sending or saving the notification

Disconnect

client.disconnect();

Check Connection Status

if (client.connected()) {
  console.log("WebSocket is connected");
} else {
  console.log("WebSocket is disconnected");
}

Arifa Notifications SDK

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.