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.

​
Pre-requisite

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

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.

Was this page helpful?