Skip to main content

​
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 "@replyke/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.