🚧 End of Support for `@suprsend/react-inbox`: Migrate to `@suprsend/react`Development of the [@suprsend/react-inbox](https://github.com/suprsend/suprsend-react-inbox) SDK has been discontinued in favour of the new [@suprsend/react](https://docs.suprsend.com/docs/headless-feed) SDK. Please refer the [migration guide](https://docs.suprsend.com/docs/migration-guide-from-v1) for instructions on transitioning to the new SDK.
This Headless Inbox can be used if you want more control on the UI of Inbox Notifications like showing notifications in Sidepanel or in Fullscreen etc.

​
Installation

npm install @suprsend/react-inbox

​
Adding SuprSend Inbox component

​
SuprSendProvider component

Enclose your notifications component in **SuprSendProvider**. SuprSend hooks can only be used in children of SuprSendProvider component 
import { SuprSendProvider } from "@suprsend/react-inbox";


<SuprSendProvider
 workspaceKey="<workspace_key>"
 subscriberId="<subscriber_id>"
 distinctId="<distinct_id>"
>
 <YourCode />
</SuprSendProvider>
PropsTypeDescription
workspaceKeystring (Mandatory)You can find it in SuprSend Dashboard inside _Settings -> API Keys_.
distinctIdstring (Mandatory)Unique identifier for the user.
subscriberIdstring (Mandatory)This is unique string for every distinctId used for authentication to inbox service. You check generation docs
tenantIdstring (Optional)If you use multi-tenant architecture you can get inbox notifications for that specific tenant/brand only.
pageSizenumber (Optional)Notifications to get in one API call. Used for pagination to get older notifications. Maximum allowed is 50. Defaults to 20.
storesStore (optional)Pass stores array if you want to use multi tab feature
🚧 SuprSend uses socket.io to get realtime updates in inbox channel.Make sure that you have only one active SuprSend’s socket connection at a time (inspect -> network -> ws tab) to avoid unexpected issues.

​
useUnseenCount hook

This hook provides unSeenCount, markAllSeen which you can show on Bell icon. 
import { useUnseenCount } from "@suprsend/react-inbox";

const { unSeenCount, markAllSeen } = useUnseenCount();
ReturnsTypeDescription
unSeenCountnumberUse this variable to show the unseen notification count anywhere in your application.
markAllSeenmethodUsed to mark seen for all notifications. Call this method on clicking the bell icon so that it will reset the unSeenCount to 0.

​
useNotifications hook

This hook is used to get notifications related data and method 
import { useNotifications } from "@suprsend/react-inbox";

const {notifications, markClicked, markAllRead, initialLoading, hasNext, fetchPrevious, fetchMoreLoading } = useNotifications(storeId)
ParameterTypeDescription
storeIdstring (Optional)Optional parameter which return data of that specific store if you are using multi-tab feature. You can ignore this if you are not using multi-tab feature.
ReturnsTypeDescription
notificationsIRemoteNotification\[]Contains information related to notifications. This array can be looped to display notifications.
markClicked(id: string) => voidused to mark notification as clicked.
markRead(id: string) => voidused to mark notification as read.
markUnRead(id: string) => voidused to mark notification as unread.
markArchived(id: string) => voidused to mark notification as archived
markAllRead( ) => voidMethod used to mark all notifications as read.
initialLoadingbooleanused for showing initial loader while fetching notifications first time
hasNextbooleancheck if older notifications are present and then call _fetchPrevious_ method if its true to get older notifications.
fetchPrevious( ) => voidused to get older notifications if you implement pagination, by checking _hasNext_ flag
fetchMoreLoadingbooleanused to show loader while getting fetch older notifications.
interface IRemoteNotification {
  n_id: string
  n_category: string
  created_on: number
  seen_on?: number
  interacted_on?: number
  tags?: string[]
  is_pinned?: boolean
  can_user_unpin?: boolean
  is_expiry_visible?: boolean
  expiry?: number
  archived?: boolean
  message: IRemoteNotificationMessage
}

interface IRemoteNotificationMessage {
  header?: string
  schema: string
  text: string
  url?: string
  open_in_new_tab?: boolean
  extra_data?: string
  actions?: { url: string, name: string, open_in_new_tab?: boolean}[]
  avatar?: { avatar_url: string; action_url?: string }
  subtext?: { text: string; action_url?: string }
}

​
useStoreUnseenCount hook

This hook can be used to get unread notifications count of a specific store, Use it only if you are using multi-tab. 
import { useStoreUnseenCount } from "@suprsend/react-inbox";

const { unSeenCount } = useUnseenCount();

​
useStoresUnseenCount hook

This hook can be used to get unread notifications count of all stores, Use it only if you are using multi-tab 
import { useStoresUnseenCount } from "@suprsend/react-inbox";

const { [storeId: string]: number } = useUnseenCount();

​
useEvent hook

This hook is an event emitter, takes arguments event type and callback function(called when event occurs). Must be called anywhere inside SuprSendProvider 
import { useEvent } from "@suprsend/react-inbox";

useEvent(event_name: string, (notification: IRemoteNotification)=> void)
Handled Event Names:
  1. new_notification: Called when the new notification occurs, can be used to show toast notification in your application.
import { useEvent } from "@suprsend/react-inbox";

function Home() {
  useEvent("new_notification", (notificationData) => {
    alert("You have new notifications");
  });

  return <p>Home</p>;
}