> ## 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
> Add a SuprSend in-app popover notification feed to your React app using drop-in components, with bell icon, unread badge, and customisable notification UI.
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](/docs/task-management-app-guide) with In-app Popover Feed and Toast Notifications.
## Inbox (Popover Feed)
```javascript Example.jsx theme={"system"}
import { Inbox, SuprSendProvider } from '@suprsend/react';
function Example() {
return (
);
}
```
```javascript TypeDef theme={"system"}
interface InboxProps {
tenantId?: string; // defaults to active tenant set in SuprSendProvider, else 'default' tenant
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
reachability?: boolean; // defaults to true. Pass false to hide the connection status dot and banner.
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; // 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](https://docs.suprsend.com/docs/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.
## Connection status
`Inbox` tells users whether their feed is working, so they know when new notifications may be missing. It combines three checks — the browser is online, the feed socket is live, and the feed API is reachable — into one status. The dot on the bell and beside the **Notifications** title, and the banner below the panel header, change based on that status: `ONLINE`, `CONNECTING`, `DEGRADED`, `AUTH_ERROR`, `OFFLINE` or `UNKNOWN`.
Connection status is on by default from `@suprsend/react` 1.3.0. After you upgrade, `Inbox` looks different: a healthy feed shows a small green dot on the bell and beside the title. Pass `reachability={false}` to restore the previous look.
| Default banner | After **Report an issue** | Report limit reached |
| - | - | - |
| 
| 
| 
|
| Feed status | Dot | Banner |
| - | - | - |
| `ONLINE` | Green | None |
| `CONNECTING` | Spinner | "Connecting…" |
| `DEGRADED` | Amber | "There seems to be a connection issue. New notifications may get delayed or missed.", with **Refresh the page** and **Report an issue** |
| `AUTH_ERROR` | Amber | "Not able to fetch notifications due to authentication or permission issue." No actions. |
| `OFFLINE` | Hollow grey | "You're offline. Reload the page to update notifications when your connection is back." The built-in **Mark all as read** button is disabled. |
| `UNKNOWN` | None | None |
For how each status is decided, see [Tracking reachability](/docs/js-inapp-feed#tracking-reachability).
If you pass your own `headerRightComponent`, it isn't disabled when the user is offline.
### Refresh the page and Report an issue
These two actions appear only on the connection issue banner (`DEGRADED`):
* **Refresh the page** reloads the page.
* **Report an issue** sends the last API and socket error to SuprSend. The banner then shows "Issue reported". If the user has sent too many reports, it shows "Report limit exceeded. Try later." If the report can't be sent for any other reason, the browser opens an email draft to [support@suprsend.com](mailto:support@suprsend.com) with the user's distinct ID, tenant ID and error details.
The user can report again after the issue clears.
### Turn off connection status
```jsx theme={"system"}
```
To change the dot and banner colours, see [Customising CSS styles](/docs/react-customising-feed#customising-css-styles). To change the banner text or translate it, see [Internationalization](/docs/react-language-support).
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.