Notification Center

The Notification Center component displays notifications with customizable behavior and polling capabilities.

Usage

Default

Notifications

You have a new follower.04:35 PM
Profile updated successfully.04:35 PM
Storage space running low.04:35 PM
Failed to load image.04:35 PM


<NotificationCenter
  notifications={mockNotifications}
  setNotifications={() => {}}
  onRemove={() => {}}
  onClearAll={() => {}}
/>

Props

Sortable data table
Prop	Type	Default	Description
notifications	Array<{ id: string, type: string, message: string, timestamp: Date, duration?: number }>	-	Array of notifications to show. Each notification should have an `id`, `type`, `message`, `timestamp`, and optionally `duration` (ms).
setNotifications	(notifications: Array<{ id: string, type: string, message: string }>) => void	-	Setter function for updating notifications (typically via useState).
onRemove	(id: string) => void	-	Callback fired when a notification is dismissed.
onClearAll	() => void	-	Callback fired when all notifications are dismissed.
showClearAll	boolean	true	Whether to display the 'Clear All' button.
maxNotifications	number	10	Maximum number of notifications displayed at once.
clearOldOnOverflow	boolean	true	Automatically remove oldest notifications when maxNotifications is reached.
fetchNotifications	() => Promise<Notification[]>	-	Optional async function for polling new notifications. Should return a Promise<Notification[]>.
pollInterval	number	5000	Polling interval in milliseconds for fetchNotifications. Default: 5000.
notificationRounding	"none" \| "small" \| "medium" \| "large"	Configured Default	Border radius for notification items.
notificationShadow	"none" \| "light" \| "medium" \| "strong" \| "intense"	Configured Default	Shadow for notification items.
controlRounding	"none" \| "small" \| "medium" \| "large"	Configured Default	Border radius for notification center controls.
controlShadow	"none" \| "light" \| "medium" \| "strong" \| "intense"	Configured Default	Shadow for notification center controls.
data-testid	string	"notification-center"	Test ID for querying the component in tests.