useNotifications
The useNotifications hook provides access to user notifications with support for pagination, marking as read/unread, starring, and archiving.
Return Value
Whether notifications are loading
Whether there are more notifications to load
Show Refetch the notifications list
Resolves when the notifications list is refetched
Show Load more notifications
Resolves when more notifications are loaded
Show Mark a notification as read
The ID of the notification to mark as read
Resolves when the notification is marked as read
Show Mark a notification as unread
The ID of the notification to mark as unread
Resolves when the notification is marked as unread
Show Mark all notifications as read
Resolves when all notifications are marked as read
Show Archive all read notifications
Resolves when all read notifications are archived
Show Archive a notification
The ID of the notification to archive
Resolves when the notification is archived
The ID of the notification to star
Resolves when the notification is starred
import { useNotifications } from "@wacht/react-router";
function NotificationsPage() {
const { notifications, loading, markAsRead, markAllAsRead, loadMore } = useNotifications();
return (
<div>
<h1>Notifications</h1>
<button onClick={() => markAllAsRead()}>Mark All Read</button>
<ul>
{notifications.map((notif) => (
<li key={notif.id}>
<span>{notif.title}</span>
<button onClick={() => markAsRead(notif.id)}>
Mark Read
</button>
</li>
))}
</ul>
<button onClick={() => loadMore()} disabled={!hasMore}>
Load More
</button>
</div>
);
}
Options
Maximum number of notifications to fetch
Filter notifications by scope
Filter by archived status
Show Callback when a new notification is received
Data Structures
interface Notification {
id: string;
deployment_id: string;
user_id: string;
organization_id?: string;
workspace_id?: string;
title: string;
body: string;
ctas?: { label: string; payload: any }[];
severity: "info" | "success" | "warning" | "error";
is_read: boolean;
read_at?: string;
is_archived: boolean;
archived_at?: string;
is_starred: boolean;
metadata?: Record<string, any>;
created_at: string;
updated_at: string;
expires_at?: string;
}
Examples
Basic Notifications List
import { useNotifications } from "@wacht/react-router";
function NotificationsList() {
const { notifications, loading, markAsRead } = useNotifications();
if (loading) return <div>Loading...</div>;
return (
<ul>
{notifications.map((notif) => (
<li key={notif.id} onClick={() => markAsRead(notif.id)}>
{notif.title}: {notif.body}
</li>
))}
</ul>
);
}
With Options
import { useNotifications } from "@wacht/react-router";
function UnreadOnly() {
const { notifications } = useNotifications({
limit: 20,
is_read: false,
});
return <div>{/* Render notifications */}</div>;
}
Mark All as Read
import { useNotifications } from "@wacht/react-router";
function MarkAllButton() {
const { markAllAsRead } = useNotifications();
return (
<button onClick={() => markAllAsRead()}>
Mark All as Read
</button>
);
}
With Real-time Updates
import { useNotifications } from "@wacht/react-router";
function NotificationBell() {
const { notifications, onNotification } = useNotifications({
onNotification: (notification) => {
toast.info(`New: ${notification.title}`);
},
});
return (
<Bell count={notifications.length} />
);
}
