Split your notification inbox by categories using MagicBell's React SDK

Last updated on December 4, 2023

With everyone receiving dozens (if not hundreds) of notifications every day, it's becoming increasingly difficult for users to understand the context of a message from the top of their phone’s notification bar.

As a solution, platforms around the world are trying to add some structure to the way they handle and display notifications. Currently, the most popular method of achieving this is by building split inboxes, which allow users to only see messages that match the category of their selection.

There are multiple ways of building this functionality- if you have the time and resources, creating an in-house solution is always a possibility. However, not everyone has the budget, nor the time to spend on this auxiliary task, even though it can bring a vast improvement in customer engagement.

This is where MagicBell comes in, allowing platforms to leverage their pre-existing stack to seamlessly build split inboxes.

For this project, we will use the React-headless library, which allows us to access useful tools like MagicBellProvider, useNotifications, and useNotification (and more) to simplify the development process.

Installing MagicBell package using npm or yarn:

We start off by installing the package and its dependencies using npm or yarn. Use one of the following commands, depending upon which package manager you prefer to work with:

npm i @magicbell/react-headless
# or
yarn add @magicbell/react-headless

Using MagicBellProvider to split inboxes

The MagicBellProvider initializes a MagicBellContext, which keeps notifications updated in real-time. It is the main component in building a custom notification inbox and passes down context for the entire application. Moreover, we can wrap the entire app in MagicBellContext due to its headless nature.

To use MagicBellProvider, just add:

import { MagicBellProvider } from "@magicbell/react-headless";

to the top of your App component.

By default, any inbox created with MagicBellProvider has one store for all notifications. However, this tool also has the power to split inboxes into as many categories as we want, defining different stores for every category created.

For example, to split your inbox into General, Planning and Billing categories, follow these steps:

<MagicBellProvider
      apiKey="df24a28e8921181f6c4220fc306ba76701592d21"
      userEmail="josue@magicbell.io"
      theme={{ icon: { borderColor: "white" } }}
      stores={[
        { id: "general", defaultQueryParams: { categories: "general" } },
        { id: "planning", defaultQueryParams: { categories: "planning" } },
        { id: "billing", defaultQueryParams: { categories: "billing" } }
      ]}
 >

In this step, the user defines stores for each category using defaultQueryParams.

Using the useNotifications hook to create different sections for each category:

So far, we have created multiple stores for our notifications, each pointing to a different category, using MagicBellProvider. Now, we want a way to access these stores so that we can start working with our notifications.

For this, we can use the useNotifications hook. This hook allows us to get a store of notifications for the currently authenticated user, returning a notification store (which is exactly what we are looking for).

To use the hook, import it using:

import { useNotifications } from '@magicbell/react-headless';

By supplying an id as a parameter to the useNotifications hook, we can gain access to a notification store that correlates to said id.

To get all general messages, we use:

const general = useNotifications("general");

Similarly, we can access planning and billing messages as follows:

const planning = useNotifications("planning");
const billing = useNotifications("billing");

Next, we create a state to keep track of the category that the user has currently selected. This can be done with React’s useState hook. We provide it with an initial value of general, which means that we will see notifications from the ‘general’ category every time we fire up our application.

const [current, setCurrent] = useState(general);

We can change the value of this state by creating ‘tabs’ that represent different categories and attaching the setCurrent function to the onClick event handler.

<button onClick={() => setCurrent(general)}>
  {`General (${general.length})`}
 </button>
 
 <button onClick={() => setCurrent(planning)}>
  {`Planning (${planning.length})`}
 </button>
 
 <button onClick={() => setCurrent(billing)}>
  {`Billing (${billing.length})`}
 </button>

Then, we map over our current notification store to access the notifications array. We pass down each notification as props to a component that renders the notification list.

{current.notifications.map((notification) => {
    return <FullWidthNotif key={notification.id} notification={notification}/>;
})}

Rendering notification using the useNotification hook

Inside our final rendering component, we use the useNotification hook which returns a Notification Object with all the methods necessary to mutate it.

import { useNotification } from "@magicbell/react-headless";
 
export const FullWidthNotif = ({ notification }) => {
  const myNotification = useNotification(notification);

  const deleteMessage = () => {
    myNotification.delete();
  };
}

With this, we have the myNotification object, which has all the attributes we are looking for. Moreover, it also gives us access to methods like delete, markAllAsRead, and many more, which can be used to manipulate data.

To display the message on the screen, we can do something like:

<div className="message">
  <div className="message-text">
    <p>{notification.title}</p>
  </div>

  <button className="delete" onClick={deleteMessage}>
    Delete
  </button>
</div>

The final product:

You can preview a working demo of this entire project at: https://codesandbox.io/s/notification-page-with-tabs-by-category-fwe3j

MagicBell allows products to focus on building the core functionality, by offering a plug-and-play notification system. It offloads the responsibility of sending and displaying notifications and offers customizations to match your product's vibe. It also has a rich library of resources about React Notifications.

Signup for your free account today!

Thanks to Upneet Singh, from the MagicBell community for this blog post.

Related articles: