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

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