> ## Documentation Index
> Fetch the complete documentation index at: https://docs.suprsend.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Popover feed

> Guide to add In-App Popover feed in react-based websites using drop-in components.

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.

<Tip>
  **New to SuprSend?** Check out [example app](/docs/task-management-app-guide) with In-app Popover Feed and Toast Notifications.
</Tip>

## Inbox (Popover Feed)

<CodeGroup>
  ```javascript Example.jsx theme={"system"}
  import { Inbox, SuprSendProvider } from '@suprsend/react';

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

  ```javascript TypeDef theme={"system"}
  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
  }
  ```
</CodeGroup>

Note: Refer [Customising Feed](https://docs.suprsend.com/docs/customising-feed) for detailed explanation on customisation options available in feed components.

<Frame>
  <img src="https://files.readme.io/8134005a504eceaeeba615a8d9189cdc363e99a62f51be601e23177f8651c166-Screenshot_2025-01-14_at_5.50.46_PM.png" />
</Frame>

<Note>
  **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.
</Note>