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 to be applied to notifications when calculating counts, allowing you to filter notifications based on workflow tags, read status, and archived status.
Callback function that will be called when the notification counts are successfully fetched. In the callback argument, you will receive the fetched counts.
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
An array of notification counts fetched by the hook. If there are no
notification counts fetched yet, it will be undefined.
A boolean value indicating the first fetch for notification counts is in-flight.
A boolean value indicating whether the hook is fetching more notification counts.
An error object that will be populated if there is an error fetching the notification counts.
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>
);
};
Was this page helpful?