Fluxo UIFluxo UIv0.4.1

NotificationCenter

A notification center component with a trigger bell, category tabs, mark-as-read, infinite scroll, and customizable panel layout.

Basic Usage

Notification Bell

Click the bell icon to open the notification panel. Unread count is shown as a badge.

import { NotificationCenter } from 'fluxo-ui';
import type { NotificationItem } from 'fluxo-ui';

const [items, setItems] = useState<NotificationItem[]>([...]);

<NotificationCenter
  items={items}
  onItemClick={(item) => console.log('Clicked:', item.title)}
  onMarkRead={(id) => markAsRead(id)}
  onMarkAllRead={() => markAllRead()}
  onClear={() => setItems([])}
/>

Categories

Pass a categories array to enable tab-based filtering. An "All" tab is automatically prepended.

Category Tabs

Filter notifications by category using tab buttons. The 'All' tab shows everything.

import { NotificationCenter } from 'fluxo-ui';

<NotificationCenter
  items={items}
  categories={['Updates', 'Social', 'Alerts']}
  onItemClick={(item) => console.log(item)}
  onMarkRead={(id) => markAsRead(id)}
  onMarkAllRead={() => markAllRead()}
/>

Custom Trigger

Use triggerElement to replace the bell icon. Customize header, footer, width, and maxHeight.

Custom Trigger & Layout

Replace the default bell icon with any element. Customize header, footer, width, and max height.

import { NotificationCenter, Button } from 'fluxo-ui';

<NotificationCenter
  items={items}
  triggerElement={<Button variant="primary" size="sm">Notifications</Button>}
  header={<div className="p-3 font-bold text-lg">My Alerts</div>}
  footer={<div className="p-3 text-center text-sm">View all notifications</div>}
  width="420px"
  maxHeight="300px"
/>

Import

import { NotificationCenter } from 'fluxo-ui';
import type { NotificationCenterProps, NotificationItem } from 'fluxo-ui';

NotificationCenter Props

itemsreq
NotificationItem[]

Array of notification items.

categories
string[]

Category names for tab filtering.

unreadCount
number

Override the auto-computed unread badge count.

onItemClick
(item: NotificationItem) => void

Called when a notification is clicked.

onMarkRead
(id: string) => void

Called when marking a single notification as read.

onMarkAllRead
() => void

Called when "Mark all read" is clicked.

onClear
() => void

Called when "Clear all" is clicked.

onLoadMore
() => Promise<void>

Called when scrolling near the bottom to load more.

hasMore
boolean"false"

Whether more notifications can be loaded.

isLoading
boolean"false"

Show loading indicator at the bottom.

triggerElement
ReactNode

Custom trigger element (replaces the default bell icon).

emptyMessage
ReactNode"'No notifications'"

Message shown when the list is empty.

header
ReactNode

Custom header for the notification panel.

footer
ReactNode

Custom footer for the notification panel.

width
string"'380px'"

Width of the notification panel.

maxHeight
string"'480px'"

Maximum height of the scrollable list.

itemTemplate
(item: NotificationItem) => ReactNode

Custom render function for notification items.

className
string

Additional CSS class for the panel.

NotificationItem Interface

idreq
string

Unique identifier.

titlereq
string

Notification title.

description
string

Notification description text.

timestamp
string | Date

When the notification occurred.

icon
ReactNode

Icon displayed on the left.

read
boolean

Whether the notification has been read.

category
string

Category for tab filtering.

action
ReactNode

Action button or link for the notification.

data
Record<string, unknown>

Custom data attached to the notification.

Features

Unread Badge

Auto-computed unread count displayed as a badge on the trigger.

Category Tabs

Filter notifications by category with an auto-generated "All" tab.

Mark Read

Mark individual or all notifications as read with a single click.

Infinite Scroll

Load more notifications on scroll with onLoadMore callback.

Custom Trigger

Replace the default bell icon with any button or element.

Accessibility

ARIA dialog, haspopup, and keyboard navigation support.