PSI Notification Client

A comprehensive notification module for React applications.

Overview

The PSI Notification module provides an easy-to-integrate solution for handling notifications in your React-based applications. It includes components for displaying notification counts, listing notifications, and managing socket connections.

Environment Requirement

Node version - v22.13.0

Installation

To get started with the PSI Notification module, follow the steps below:

Install the module:

Using npm:

npm install psi-notification-client

Or using yarn

yarn add psi-notification-client

Available Components

This module includes the following components:

• NotificationProvider: Provides context for your socket connection.
• useNotification: A custom hook to interact with the socket, including connection management and receiving new notifications.
• NotificationIcon: Displays the count of new notifications.
• NotificationList: Renders a list of notifications.

Usage

NotificationProvider Component

The NotificationProvider component wraps your application to provide a context for managing socket connections and notifications.

<NotificationProvider url={'your-socket-server-address'} userId={'userId'}>
    {children}
</NotificationProvider>

Props:

• url: The URL of the socket server used to establish the connection.
• userId: The identifier for the current user on the socket server.

useNotification() - Custom Hook

The useNotification() hook provides an interface for managing notifications through a socket connection. It includes methods for connecting to the server, disconnecting, and interacting with the notification list.

const {
    socket,
    hostUrl,
    userId,
    notifications,
    setNotifications,
    newNotification,
    setNewNotification,
    showCounter,
    setShowCounter,
    sendNotification,
} = useNotification();

Props:

• socket: The socket instance used to establish a connection.
• hostUrl: The URL of the socket server for establishing the connection.
• userId: The ID of the currently logged-in user.
• notifications: A list of current notifications.
• setNotifications: A function to initialize or update the notification list for the notification feed ((list: NotificationProps[]) => void).
• newNotification (Optional): A callback that returns the latest notification when a new notification arrives.
• setNewNotification (Optional): Function to manage the state of new notifications.
• showCounter (Optional): Boolean flag to control whether to display the unread notification count.
• setNotifications (Optional): Function to manage the visibility of the unread notification count ((status: boolean) => void).
• sendNotification: A function to push a new notification to the server ((data: any) => void).

NotificationIcon Component

The NotificationIcon component displays the current count of unread notifications and provides a link to the notification feed.

<NotificationIcon
    count={0}
    handleRedirect={redirectionHandlerMethod} // callback method
    displayNotificationInPopover={true} // default is true
    notifications={newNotificationsList}
    updateNotificationStatus={updateNotificationStatusToUnread}
    handleNotificationClick={handleNotificationClick}
/>

Props:

• count: The number of unread notifications.
• handleRedirect: Function to handle the redirection to the notification feed when the icon is clicked.
• displayNotificationInPopover: If true, displays the list of new notifications in a popover. If false, clicking the icon directly takes the user to the notification feed. (default is true)
• notifications: An array containing the list of new notifications to display in the popover.
• updateNotificationStatus: A callback function triggered when the icon is clicked, used to update the notification status (e.g., mark notifications as read).
• handleNotificationClick: A callback triggered when a specific notification is clicked, used for routing or handling actions related to that notification.

NotificationList Component

The NotificationList component displays a list of notifications, along with options for interacting with them.

<NotificationList
    getNotificationApiPath={'get_notification_list_api'} // URL for get notification list
    limit={10} // default value is 10
    status={['new', 'read', 'unread']} // Optional. default value is ['new', 'read', 'unread']
    showDeleteIcon={true} // Option to show delete icon
    onClick={handleNotificationClick} // Click handler for notification items
    onDelete={handleNotificationDelete} // Delete handler for notifications
    customIcons={{
        // Option to provide custom icons
        read: <NotificationsNone />,
        unread: <NotificationsActive />,
        delete: <Delete />,
    }}
    customColors={{
        // Option to provide custom colors
        readColor: '#d3d3d3',
        readHoverColor: '#b3b3b3',
        unreadColor: '#a8dadc',
        unreadHoverColor: '#457b9d',
    }}
/>

Props:

• getNotificationApiPath: The API endpoint to fetch the notification list.
• limit: The number of notifications to retrieve per API call (default is 10).
• status: The status of notifications to retrieve. Can be an array such as ['new', 'read', 'unread']. (default is ['new', 'read', 'unread']).
• onClick: Function to handle notification item click.
• onDelete: Function to handle notification deletion.
• showDeleteIcon: Boolean to control the visibility of the delete icon.
• onLoadMore: Callback function triggered when the intersection observer detects that the notification list has reached the end, indicating the need to load more notifications.
• customIcons: Custom icons for various notification states (read, unread, delete).
• customColors: Custom colors for notification states (read, unread).