Create Custom Inbox UI with React Hooks

The @novu/react package offers an interface that enables you to build a custom notifications UI using React hooks that are powered by real-time data from the Novu services.

These hooks are designed for use in both mobile and web applications, offering a flexible approach to building a custom notifications UI tailored to your application’s requirements.

Getting Started

Follow these steps to get started with building your custom inbox UI:

1. Install the @novu/react package

   npm install @novu/react 
   

2. Implement the NovuProvider

   To implement the NovuProvider component, you need to place it in your application’s code at the tree level where you want the hooks to be accessible. Here’s how you can do it:

   import { NovuProvider } from '@novu/react/hooks';
   
   function App() {
     return (
       <NovuProvider
         subscriberId="YOUR_SUBSCRIBER_ID"
         applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
       >
         {/* Your app components where you want to use the hooks */}
         <YourCustomInbox />
       </NovuProvider>
     );
   }
   

   You can find the applicationIdentifier in the Novu Dashboard under the API keys page. The subscriberId is the unique identifier of the user in your application, learn more about subscribers here.

3. Create the custom Inbox UI

   For example, you can create a custom popover UI with a bell icon that shows the unread notifications count and a list of notifications.

   const YourCustomInbox = () => {
     return (
       <Popover.Root open={...} onOpenChange={...}>
         <Popover.Trigger>
           <BellButton />
         </Popover.Trigger>
         <Popover.Content>
           <NotificationsList />
         </Popover.Content>
       </Popover.Root>
     );
   };
   

   The BellButton component fetches the unread notifications count and renders the count value in the indicator.

   import { useCounts } from '@novu/react/hooks';
   
   const BellButton = () => {
     const { counts } = useCounts({ filters: [{ read: false }] });
   
     return (
       <button>
         <BellIcon>
         {counts && counts[0].count > 0 && <span>{counts[0].count}</span>}
       </button>
     );
   };
   

   The NotificationsList component retrieves and displays the notifications list with infinite scrolling functionality.

   import { useNotifications } from '@novu/react/hooks';
   
   const NotificationsList = () => {
     const { notifications, isLoading, fetchMore, hasMore } = useNotifications();
   
     return (
       <Show when={!isLoading} fallback={<NotificationListSkeleton />}>
         <Show
           when={notifications && notifications.length > 0}
           fallback={<EmptyNotificationList />}
         >
           <InfiniteScroll
             dataLength={notifications?.length ?? 0}
             fetchMore={fetchMore}
             hasMore={hasMore}
             loader={<LoadMoreSkeleton />}
           >
             {notifications?.map((notification) => {
               return (
                 <NotificationItem
                   key={notification.id}
                   notification={notification}
                 />
               );
             })}
           </InfiniteScroll>
         </Show>
       </Show>
     );
   };
   

   The NotificationItem component renders each notification item.

   When any action is performed on the notification instance for example “read” button is clicked, the SDK will optimistically update notification that will result in the useNotifications hook rerender, so yo don’t need to refetch and manually update your UI.

   const NotificationItem = ({ notification }) => {
     return (
       <div>
         {notification.isRead && <span className="dot-indicator">}
         <h3>{notification.subject}</h3>
         <p>{notification.body}</p>
         <button onClick={() => notification.read()}>Read</button>
         <button onClick={() => notification.archive()}>Archive</button>
       </div>
     );
   };