Full screen or Sidesheet notifications feed - SuprSend, Notification infrastructure for Product teams

Render NotificationFeed

If you want to render notifications in separate screen or in side-sheet or in any other way instead of popover, you can use NotificationFeed component wrapped inside SuprSendFeedProvider. Both of these components should be children of SuprSendProvider.

import { SuprSendProvider, SuprSendFeedProvider, NotificationFeed } from '@suprsend/react';

function Example() {
  return (
    <SuprSendProvider>
      <SuprSendFeedProvider>
        <NotificationFeed />
      </SuprSendFeedProvider>
    </SuprSendProvider>
  );
}

interface SuprSendFeedProviderProps {
  tenantId?: string; // defaults to active tenant set in SuprSendProvider, else 'default' tenant
  pageSize?: number;
  stores?: IStore[] | null;
  host?: { socketHost?: string, apiHost?: string };
  reachability?: boolean; // defaults to false. Pass it to show the connection status dot and banner.
}

interface NotificationFeedProps {
  pagination?: boolean;
  showUnreadCountOnTabs?: boolean;
  hideAvatar?: boolean;
  themeType?: ThemeType;
  theme?: INotificationFeedTheme;
  notificationClickHandler?: (notification: IRemoteNotification) => void;
  primaryActionClickHandler?: (notification: IRemoteNotification) => void;
  secondaryActionClickHandler?: (notification: IRemoteNotification) => void;
  loaderComponent?: React.FC;
  noNotificationsComponent?: React.FC;
  tabBadgeComponent?: React.FC<{ count: number }>;
  notificationComponent?: React.FC<CustomNotificationCard>;
  headerRightComponent?: React.FC<{markAllRead: () => void, closeInboxPopover: () => void}>;
}

Please refer Customising CSS styles section to view typedefs for INotificationFeedTheme.

Infinite scroll

Infinite scroll is also included to fetch more pages in NotificationFeed component. Specifying height for the container is needed for infinite scroll to work properly.

<NotificationFeed theme={{ notificationsContainer: { container: { height: '100vh' } } }} />

Connection status

NotificationFeed can show the same connection status dot and banner as Inbox. Unlike Inbox, it’s off by default. To turn it on, pass reachability to your SuprSendFeedProvider.

<SuprSendFeedProvider reachability>
  <NotificationFeed />
</SuprSendFeedProvider>

⌘I