Guides
LoginSignupGithub

InApp Feed

This will guide you through integration steps of feed in react application

Suggest Edits

For react applications you can implement InApp feed using our Drop-In components (popover, full screen and side sheet notifications) or Build your own UI using headless react hooks.

Prerequisite

Integrate SuprSendProvider as it is needed for creating SuprSend Client and authenticating user.

Inbox (Popover Feed)

The Inbox component comes with Bell, Badge and Popover that contains notifications and it should be child of SuprSendProvider. This component is already wrapped in SuprSendFeedProvider internally, so you don't have to wrap it again.

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

function Example() {
  return (
    <SuprSendProvider>
      <Inbox pageSize={20} />
    </SuprSendProvider>
  );
}

interface InboxProps {
  tenantId?: string; 
  stores?: IStore[] | null; // pass it if you want to use multiple tabs
  host?: {
    socketHost?: string,
    apiHost?: string,
  };
  pageSize?: number; // defined page size defaults to 20, max value that can be passed is 100
  pagination?: boolean; // pass false to disable pagination
  theme?: ITheme; // used to customise css styles of existing component
  themeType?: ThemeType; // dark or light
  popperPosition?: Placement; // placement of inbox popover on click of bell
  hideAvatar?: boolean;
  showUnreadCountOnTabs?: boolean;
  notificationClickHandler?: (notification: IRemoteNotification) => void; // callback executed on click of notification card
  primaryActionClickHandler?: (notification: IRemoteNotification) => void; // callback executed on click of primary action button
  secondaryActionClickHandler?: (notification: IRemoteNotification) => void; // callback executed on click of secondary action button
  bellComponent?: React.FC; // custom component for bell
  badgeComponent?: React.FC<{ count: number }>; // custom component for badge
  loaderComponent?: React.FC; // custom component for loader
  noNotificationsComponent?: React.FC; // custom component when no notifications are present
  tabBadgeComponent?: React.FC<{ count: number }>;
  notificationComponent?: React.FC<CustomNotificationCard>;  // custom notification card component
  headerRightComponent?: React.FC<{markAllRead: () => void,closeInboxPopover: () => void}>; // custom right side header component to override mark all as read etc
}

Note: Refer Customising Feed for detailed explanation on customisation options available in feed components.

📘

Toast Notifications in @suprsend/react

In the @suprsend/react SDK, toast notification functionality is no longer included in Inbox by default. Developers who wish to use toast notifications will need to implement them separately to achieve similar functionality. This change allows for more flexibility and modularity in customizing the user experience.

Updated 2 days ago