Skip to main content

NotificationCenter

NotificationCenter renders a notification bell with an unread badge and a slide-out panel of notifications. It shows toasts for new items and can persist history through a /spfx or /codeapps adapter hook — or run purely in-memory for standalone React.

When to use​

  • Surface in-app alerts, mentions, or job-completion notices with unread tracking.
  • Persist a user's notification history to SharePoint or Dataverse.

For a single inline message use MessageBar instead.

Import​

import { NotificationCenter } from '@spartanfx/react';

With the SharePoint adapter​

The adapter hook returns a provider you pass to the component; it handles reading, marking-read, and persistence.

import { NotificationCenter } from '@spartanfx/react';
import { useSharePointNotificationCenter } from '@spartanfx/react/spfx';
import { getSP } from '@spartanfx/react';

function AppBar({ context }) {
  const sp = getSP(context);
  const provider = useSharePointNotificationCenter({
    sp,
    listTitle: 'Notifications',
    schema: { id: 'Id', title: 'Title' /* …map your columns */ },
  });

  return (
    <NotificationCenter
      provider={provider}
      panelTitle="Notifications"
      markAllReadOnOpen
      enableClearHistory
    />
  );
}

For Power Apps Code Apps, use useCASharePointNotificationCenter or useCADataverseNotificationCenter.

Key props​

PropTypeNotes
providerINotificationCenterHookFrom an adapter hook; omit to use context/in-memory.
panelTitlestringPanel heading.
maxItemsnumberCap items shown.
markAllReadOnOpenbooleanMark everything read when the panel opens.
enableClearHistory / enableDeleteItembooleanAllow clearing history / deleting items.
onNotificationClick(item) => voidHandle a click on a notification.
appearanceAppearanceModeLight or dark theming.

See the full generated reference: NotificationCenter API ↗ and the adapter hook useSharePointNotificationCenter.

See also​