Headless Inbox

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
yarn add @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.
storesIStore[] (Optional)Pass stores array if you ant to use multi-tab feature.
interface IStore {
  storeId: string
  label: string
  query?: {
    tags?: string | string[]
    categories?: string | string[]
    read?: boolean
  }
}

🚧

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 methods

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.
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
  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 }
  tags?: 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, (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>;
}