Skip to main content
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

PropertyTypeDescription
filtersNotificationFilter[]Array of filters to apply when fetching counts
onSuccess(data: Count[]) => voidCallback function called when counts are successfully fetched
onError(error: NovuError) => voidCallback function called when an error occurs

​
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>
  );
}

​
Real-time counts updates

The counts are automatically updated in real-time when notifications state (read, seen, archived, snoozed) changes or when new notifications arrive.