Skip to main content
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.
New to SuprSend? Check out example app with In-app Popover Feed and Toast Notifications.

Inbox (Popover Feed)

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/reactIn 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.