InApp Feed
This will guide you through integration steps of feed in react application
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/reactSDK, 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 3 months ago