Full screen or Sidesheet notifications feed

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;
  pageSize?: number;
  stores?: IStore[] | null;
  host?: { socketHost?: string, apiHost?: string };
}

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}>;
}

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

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' } } }} />