You Don't Really Need the Best React Notification Library

Allie Dyer Bluemel Last updated on September 27, 2024

Before you set your mind to building a custom notification solution for your product, it’s necessary to understand the growth of your product, and how a notification system might need to scale with it.

It makes sense to dedicate time and resources to plan out a custom solution if the notification system is going to be deeply rooted in your core product. But if not, there are existing solutions out there that can scale with your product.

As notification systems become a larger part of your app, they’ll need to scale accordingly. While notification libraries are great for quick implementation, the reality is scaling them to grow with the needs of the business will require a lot of time and resources.

Instead of just searching for the best React notification library, consider using a reliable third-party notification tool. In the long run, this will be more sustainable as your organization grows, which frees up your time to work on core product features.

How future scaling should affect your implementation decisions now

As notification strategies become successful in their engagement or become revenue drivers, they will need to evolve to continue that growth. The best React notification library you’ve found will take a serious effort from developers to scale into larger notification strategies.

Before implementing the basic framework of a notification system, you should have an understanding of the different types of notifications, and how stakeholders might want to utilize them in the product.

In-app

In-app notifications are a great way to point users to parts of the app you want to highlight. Did your product update its user interface based on user feedback? An in-app message (or series of messages) would allow you to relay that information to a user while they’re actively using the app.

Mobile push and Web push

We’re grouping these two together due to similar behavior and usage. Unlike in-app notifications (which are considered part of the product), mobile and web push notifications need a user’s consent before they can be delivered.

Push notifications are leveraged to deliver time-sensitive information. Let’s say you check-in for a flight through the airline’s app and two days later there’s an update to the flight’s status.

Push notification has a much higher chance of being seen in a timely manner than an in-app or email notification. Because push notifications are quite literally pushed in front of you, they can be extremely useful in your workflow tools—updating you if you need to review something or another actionable task.

SMS

Just like push notifications, SMS is a consent-based notification system. And people are prone to reading their text messages, if for no other reason than to get rid of the little annoying red badge. Unless you love answering calls from unknown callers 🤨, you’re probably in the same boat as a lot of other people.

You mostly ignore unknown calls, but open, read, and either delete or perform the intended action on an SMS. SMS can serve as an effective marketing strategy, sending users to any point on the web, not just back to an associated app, like mobile push.

Email

We won’t dive into email too much here, because email is in the aging generation of notifications. While email notifications have the benefit of sending longer messages with visual identities and embedded media, they face a lot of obstacles. Consent is required for email communication, and spam ratings affect whether emails end up in the inbox, promotions, social, or spam folder.

While emails are effective for large marketing campaigns and newsletters, they’re not necessarily the best notification platform since it’s hard to guarantee the message will reach the user at the right time.

So, what does all this mean for your notification system? With the exception of in-app messages, all other forms of notifications are required to have an opt-in or consent process. Each user’s personally identifiable information needs to be stored and managed.

There needs to be a way to easily delete user information if they decide to opt-out, or update their information if they need to change their email or phone number. When a notification system scales with user growth, this can be overwhelming to take on if notifications are not your core product.

Even the best React notification library won’t meet all your needs

If we look at the features of one of the most downloaded React notification libraries, react-toastify, we can see there are opportunities here to customize notifications. You can customize to be visually on-brand, define animation and timing behavior, and add open and close hooks.

But these popular frontend libraries for notification services are quite limited. There’s no inherent way to scale without dedicating a lot more time and resources to this. To integrate consent-based notifications, you’ll need service workers, a server, and a database.

Let’s go over each of their roles.

A service worker is a proxy between web apps and browsers. In a notification system, a service worker will be registered after a user consents to receiving notifications, creating a push subscription endpoint in the server. The service worker then manages notifications for each user.

The push notification registration then gets saved to a server. When a message gets sent to a user, the server is responsible for sending it to the correct user subscription endpoint. Since the service worker is managing notifications for each user, when a notification is sent from the push server, the service worker listens for those push events, then sends them to the user.

One of the biggest headaches for building your own system, especially if notifications are not core to your product, is creating a secure system. User subscriptions contain sensitive information, so it’s important to have the communication from the app to the server be secure. If any sort of data breach were to occur with an insecure connection, malicious notifications could be sent to your users.

In addition, a database will be needed to store user subscriptions, and there will also need to be a way to manage opt-out, unsubscribe, and update requests. Using the best React notification library, there’s still a lot of time consuming work to do.

The benefits of integrating a third-party notification tool

The biggest benefit a third-party tool is going to give you is the ability to offload a lot of the responsibility of notification system architecture. Third-party tools provide you with full solutions with their APIs and SDKs, often with ways to tailor the experience to your business—if you have the capacity to take on more work.

While your core product may not be tied to notifications, notifications are the core product of notification tools. The people behind these tools are constantly working to improve their products and add features that will help you utilize notifications.

Beyond the basic notification system architecture, some other features that third-party tools can handle or facilitate with are:

Notification status
Segmentation
Analytics
Translations
Data retention
Dashboards

The React SDK from MagicBell allows you to listen to certain events through hooks. The data from these events can be useful for planning notification strategies and provides deeper insight into how your users are responding to and interacting with notifications.

Event Name	Description
*	Any event
notifications.new	A new notification for the authenticated user was created
notifications.read	A notification was marked as read
notifications.read.all	All notifications were marked as read
notifications.unread	A notification was marked as unread
notifications.seen.all	All notifications were marked as seen
notifications.delete	A notification was deleted

A custom_attributes parameter in MagicBell’s REST API lets you attach key value pairs to notifications. This is helpful if you want to create segments for your users, allowing you to target notifications for specific groups of people. Sending custom_attributes also allows you to initiate the onNotificationClick callback, disabling the default click behavior. Through this callback, you’ll receive the entire notification object, allowing you to use custom_attributes for redirecting and analytics purposes.

...
 body: '{
   "notification": {
     "title": "Ticket assigned to you: Do you offer demos?",
     "recipients": [{
       "email": "[email protected]",
         "external_id": "1924"
      }],
      "content": "Can I see a demo of your product?",
      "custom_attributes": {
        "segment_one": "HR Team",
        "segment_two": "Project Management Team"
      },
      "category": "new_message"
    }
 }'
...

Through a translation key, MagicBell provides a way to give users with language settings a way to interact with their inbox in their native language.

...
locale: {
 name: 'pt_BR',
 translations: {
  Notifications: 'Notificações',
  'Mark all read': 'Marcar tudo como lido',
  'Mark as read': 'Marcar como lido',
  'Mark as unread': 'Marcar como não lido',
  Delete: 'Apagar',
  'All clear': 'Nenhuma notificação disponível!',
 }
},
...

With data retention solutions and a dashboard where you can customize your billing options and channel delivery, as well keep tabs on your usage, MagicBell is a notification tool that’s ready to integrate into your product.

Scaling your workflow notifications with your business

As your product scales, MagicBell can scale with it. From free services for when you’re just starting out, to enterprise features when your growth is skyrocketing, there are options available for your needs.

With in-app, web push, mobile push and email notification features, there’s a workflow notification solution available for your customers. Our embeddable notification inbox can be integrated and up and running with your product within an hour.

We also have a rich React Notification resource library for you to continue exploring the topic and learn how to build notifications in React and React Native.

Instead of using the best React notification library you find in your Google search, check out MagicBell and start your free trial now.

Related articles: