useCounts

Learn how to use the useCounts hook to fetch notification counts in your React application

The useCounts hook provides a way to fetch various notification counts, including unread, unseen, total counts, or filtered by severity. This hook is useful for displaying notification badges and indicators in your application.

Hook parameters

Prop	Type	Default
`onError?`	`(error: NovuError) => void`	-
`onSuccess?`	`(data: Count[]) => void`	-
`filters`	`NotificationFilter[]`	-

Return value

type Count = {
  count: number;
  filter: NotificationFilter;
};
 
type UseCountsResult = {
  counts?: Count[];
  error?: NovuError;
  isLoading: boolean;
  isFetching: boolean;
  refetch: () => Promise<void>;
};

Example usage

Here's how to use the useCounts hook to fetch and display various notification counts, including unread, unseen, and counts based on severity.

import { useCounts } from "@novu/react";
 
function BellButton() {
  const { counts } = useCounts({ 
    filters: [
      { read: false }, // Unread notifications
      { seen: false }  // Unseen notifications
      { severity: SeverityLevelEnum.HIGH } // High severity notifications
    ] 
  });
  
  const unreadCount = counts?.[0]?.count ?? 0;
  const unseenCount = counts?.[1]?.count ?? 0;
  const highSeverityCount = counts?.[2]?.count ?? 0;
 
 
  return (
    <button>
      <BellIcon />
      {/* Example: Show a badge for high severity, otherwise show the unread count */}
      {highSeverityCount > 0 ? (
        <span className="badge-high-severity">{highSeverityCount}</span>
      ) : unreadCount > 0 ? (
        <span className="badge">{unreadCount}</span>
      ) : null}
    </button>
  );
}

The counts are automatically updated in real-time when notifications are marked as read/unread or when new notifications arrive.

Hook parameters

Return value

Example usage

On this page