useCounts

The useCounts hook is used to fetch the notification counts based on the provided filters. You can use this hook to fetch the total count of unread, archived notifications or any other custom count based on the filters you provide.

The hook listens for changes in notification counts and will automatically refetch the counts whenever they are updated, for example, when a new notification is received.

useCounts props

filters

NotificationFilter[]

Filters to be applied to notifications when calculating counts, allowing you to filter notifications based on workflow tags, read status, and archived status.

onSuccess

Function

Callback function that will be called when the notification counts are successfully fetched. In the callback argument, you will receive the fetched counts.

onError

Function

Callback function that will be called when there is an error fetching the notification counts. In the callback argument, you will receive the error object.

useCounts returns

counts

Count[] | undefined

An array of notification counts fetched by the hook. If there are no notification counts fetched yet, it will be undefined.

isLoading

boolean

A boolean value indicating the first fetch for notification counts is in-flight.

isFetching

boolean

A boolean value indicating whether the hook is fetching more notification counts.

error

NovuError | undefined

An error object that will be populated if there is an error fetching the notification counts.

refetch

Function

A function that can be called to refetch the notification counts.

Example usage

The below example demonstrates how to use the useCounts hook to fetch the unread notifications count.

import { useCounts } from '@novu/react/hooks';

const BellButton = () => {
  const { counts } = useCounts({ filters: [{ read: false }] });

  return (
    <button>
      <BellIcon>
      {counts && counts[0].count > 0 && <span>{counts[0].count}</span>}
    </button>
  );
};