Use app notifications

Fetch notifications, track unread count, and mark as read

Overview

Redux-powered hook that provides a paginated notification feed for the current authenticated user. Loads notifications and unread count on mount, supports infinite scrolling via loadMore, and exposes mark-as-read actions with optimistic updates.

For integration guidance and template configuration, see App Notifications.

Usage Example

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

function NotificationBell() {
  const { unreadAppNotificationsCount } = useAppNotifications();

  return <span>{unreadAppNotificationsCount} unread</span>;
}

function NotificationList() {
  const {
    appNotifications,
    loading,
    hasMore,
    loadMore,
    markNotificationAsRead,
  } = useAppNotifications({
    limit: 20,
    notificationTemplates: {
      entityComment: { content: "$initiatorName commented on your post" },
      newFollow: { content: "$initiatorName followed you" },
    },
  });

  return (
    <ul>
      {appNotifications.map((n) => (
        <li key={n.id} onClick={() => markNotificationAsRead({ notificationId: n.id })}>
          {n.content ?? n.type}
        </li>
      ))}
      {hasMore && <button onClick={loadMore}>Load more</button>}
    </ul>
  );
}

Parameters

limit · number

Number of notifications to load per page. Defaults to 10.

notificationTemplates · Partial<NotificationTemplates>

Optional display text templates for each notification type. Applied at render time. See Notification Templates.

Returns

appNotifications · UnifiedAppNotification[]

Array of notification records, augmented with title and content if templates are provided.

unreadAppNotificationsCount · number

Total number of unread notifications for the current user.

loading · boolean

true while a fetch is in progress.

hasMore · boolean

true if there are additional pages to load.

loadMore · () => void

Triggers loading the next page of notifications and appending them to the list.

markNotificationAsRead · ({ notificationId: string }) => Promise<void>

Marks a single notification as read with an optimistic local update.

markAllNotificationsAsRead · () => Promise<void>

Marks all notifications as read with an optimistic local update.

resetAppNotifications · () => Promise<void>

Clears and re-fetches from page 1.

This hook requires the current user to be authenticated. It will not load until user and projectId are available.