NotificationCenter

@spartanfx/react v1.0.4

---

@spartanfx/react / NotificationCenter

Variable: NotificationCenter

const NotificationCenter: React.FC<INotificationCenterProps>

NotificationCenter - Main component for managing and displaying notifications

Supports three data source types via dedicated hooks:

• Web Storage (local/session): useNotificationCenter
• SharePoint Lists: useSharePointNotificationCenter
• Custom Backend: useCustomNotificationCenter

Examples

Example 1: Web Storage (Local/Session Storage)

import { useNotificationCenter, NotificationCenterProvider, NotificationCenter, AppearanceMode } from '@spartanfx/react';

// App root - configure once
const App = () => {
  const config = useNotificationCenter({
    storage: 'local',              // or 'session'
    storageKey: 'my-app-notifications',
    maxItems: 100,
  });

  return (
    <NotificationCenterProvider config={config}>
      <MyApp />
    </NotificationCenterProvider>
  );
};

// Any child component - access via context
const Header = () => (
  <NotificationCenter
    enableClearHistory
    enableDeleteItem
    appearance={AppearanceMode.auto}
    panelTitle="Notifications"
  />
);

// Send notifications from anywhere
const MyComponent = () => {
  const { addNotification } = useNotificationCenter();

  const handleClick = async () => {
    await addNotification({
      title: 'Success!',
      message: 'Your changes have been saved',
      level: 'success',
    }, {
      mode: 'toastAndList',
      toastDurationMs: 4000,
    });
  };

  return <button onClick={handleClick}>Save</button>;
};

Example 2: SharePoint Backend

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

// App root - configure with SharePoint
const App = (props: { context: WebPartContext }) => {
  const sp = getSP(props.context);

  // Define schema mapping
  const schema = {
    id: 'Id',
    title: 'Title',
    message: 'Message',
    level: 'Level',
    createdAt: 'Created',  // optional, defaults to 'Created'
    isRead: 'IsRead',
    linkUrl: 'LinkURL',    // optional
    source: 'Source',      // optional
  };

  const config = useSharePointNotificationCenter({
    sp: sp,
    listTitle: 'Notifications',
    schema: schema,
    maxItems: 100,
    ensureListAndFields: true,  // auto-create list if needed
  });

  return (
    <NotificationCenterProvider config={config}>
      <MyApp />
    </NotificationCenterProvider>
  );
};

// Use in child components
const MyComponent = () => {
  const { addNotification } = useSharePointNotificationCenter();

  const handleApprove = async () => {
    await addNotification({
      title: 'Document Approved',
      message: 'The document has been approved successfully',
      level: 'success',
      source: 'Approval Workflow',
    });
  };

  return <button onClick={handleApprove}>Approve</button>;
};

Example 3: Custom Backend (REST API)

import { useCustomNotificationCenter, INotificationCenterStore, NotificationCenterProvider, NotificationCenter } from '@spartanfx/react';

// Create custom store
const createApiStore = (apiUrl: string): INotificationCenterStore => ({
  load: async () => {
    const res = await fetch(`${apiUrl}/notifications`);
    return res.json();
  },
  add: async (item) => {
    const res = await fetch(`${apiUrl}/notifications`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(item),
    });
    return res.json();
  },
  update: async (id, patch) => {
    await fetch(`${apiUrl}/notifications/${id}`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(patch),
    });
  },
  remove: async (id) => {
    await fetch(`${apiUrl}/notifications/${id}`, { method: 'DELETE' });
  },
  clear: async () => {
    await fetch(`${apiUrl}/notifications`, { method: 'DELETE' });
  },
});

// App root - configure with custom store
const App = () => {
  const apiStore = createApiStore('https://api.example.com');
  const config = useCustomNotificationCenter(apiStore);

  return (
    <NotificationCenterProvider config={config}>
      <MyApp />
    </NotificationCenterProvider>
  );
};

// Use in child components
const MyComponent = () => {
  const { addNotification, items, unreadCount } = useCustomNotificationCenter();

  return (
    <div>
      <p>Unread: {unreadCount}</p>
      <NotificationCenter enableClearHistory />
    </div>
  );
};

Example 4: Direct Provider Prop (without context)

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

const MyComponent = () => {
  const provider = useNotificationCenter({ storage: 'local' });

  return (
    <NotificationCenter
      provider={provider}
      enableClearHistory
      enableDeleteItem
    />
  );
};

Example 5: Notification Modes

const MyComponent = () => {
  const { addNotification } = useNotificationCenter();

  // Toast only (no list entry)
  await addNotification({ title: 'Saved!' }, { mode: 'toastOnly' });

  // List only (no toast)
  await addNotification({ title: 'Background job started' }, { mode: 'listOnly' });

  // Both toast and list (default)
  await addNotification({ title: 'File uploaded' }, { mode: 'toastAndList' });

  // Custom toast duration
  await addNotification(
    { title: 'Important!', level: 'warning' },
    { mode: 'toastAndList', toastDurationMs: 8000 }
  );

  // Keep unread if toast shown
  await addNotification(
    { title: 'Action required' },
    { mode: 'toastAndList', markReadOnToast: false }
  );
};