Skip to main content
useAppNotifications is the primary hook for building a notification feed. It loads notifications, tracks the unread count, handles pagination, and exposes actions for marking notifications as read.

​
Basic Usage

import { useAppNotifications } from "@replyke/react-js";

function NotificationFeed() {
  const {
    appNotifications,
    unreadAppNotificationsCount,
    loading,
    hasMore,
    loadMore,
    markNotificationAsRead,
    markAllNotificationsAsRead,
  } = useAppNotifications({ limit: 20 });

  return (
    <div>
      <p>{unreadAppNotificationsCount} unread</p>
      <button onClick={markAllNotificationsAsRead}>Mark all as read</button>
      {appNotifications.map((n) => (
        <div
          key={n.id}
          style={{ fontWeight: n.isRead ? "normal" : "bold" }}
          onClick={() => markNotificationAsRead({ notificationId: n.id })}
        >
          {n.title ?? n.type}
        </div>
      ))}
      {hasMore && <button onClick={loadMore}>Load more</button>}
    </div>
  );
}

​
Parameters

​
limit
number
Number of notifications to load per page. Defaults to 10.
​
notificationTemplates
Partial<NotificationTemplates>
Optional map of display text templates for each notification type. See Notification Templates.

​
Returns

​
appNotifications
UnifiedAppNotification[]
The list of notification records. If notificationTemplates is provided, each notification is augmented with a title and/or content field derived from the template.
​
unreadAppNotificationsCount
number
The total number of unread notifications for the current user.
​
loading
boolean
true while a fetch is in progress.
​
hasMore
boolean
true if there are more notifications to load beyond the currently loaded set.
​
loadMore
() => void
Increments the internal page counter, triggering a fetch of the next page and appending results to appNotifications.
​
markNotificationAsRead
({ notificationId: string }) => Promise<void>
Marks a single notification as read. Applies an optimistic update immediately before the API call.
​
markAllNotificationsAsRead
() => Promise<void>
Marks all of the current user’s notifications as read. Applies an optimistic update immediately.
​
resetAppNotifications
() => Promise<void>
Clears the current notification list and re-fetches from page 1. Useful for pull-to-refresh.
The hook is backed by Redux. Notifications are shared globally in the Redux store — multiple instances of the hook in different components will share the same state.