Add a real time notification system to your React app

Notifications can be a great way to give your users important information and get them engaged with your product. Building an in-app notification center has a lot of pieces to it including:

• User interface for seeing the notifications

• Template system for easily updating notifications

• Queuing system for handling high volume notifications

• Real-time queries to show notifications and badges as soon as they are available

• View and click tracking to measure the usage of notifications

In this article we're going to use the react-notification-center-component npm package as a shortcut so we don't have to build each of those components from scratch (if you're using Vue instead, you can see our similar article here). The whole project shouldn't take more than 30 min to get your first notification sent. You can see a demo of the notification center here.

If you prefer watching video guides, check out the video below:

Adding the React component

To get started, head over to the npm package and add the react-notification-center-component to your React project. You can add it like this:

npm install --save react-notification-center-component

Then you can add the react-notification-center-component to your UI, wherever you want the bell icon to appear to allow your users to see their notifications.

import React from 'react';
import NotificationCenter from 'react-notification-center-component';
 
function App() {
  return (
    <div >
      <NotificationCenter className="myCustomClass" appId="u5O4GI0C8X" subscriberId="foo2"/>
    </div>
  );
}
 
export default App;

There are three props in the react component: appId, subscriberId and className. You'll get an appId automatically generated in the next section (setting up Ravenhub). The subscriberId is the unique ID that you use to identify a user in your app. This is how the component knows which user's notifications to show. Lastly you can use the className prop to add a css class to the component for styling.

By this point, you should have the notification bell somewhere in your app, but you won't have any notifications yet! We'll get to that next.

Setting up Ravenhub

In order to start sending notifications to your user's notification center, you'll need to create a Ravenhub account to create some notification templates and generate an API endpoint to send requests to. To see the full documentation on managing templates and sending notifications, head over to the docs.ravenhub.io.

After signing up for your account, you can create a Template and Event Type which will automatically generate an API endpoint where you can send your data to generate a notification. With the endpoint URL and the subscriberId that you want to send a notification to, you can send a notification from your app like this:

const subscriberId = 'foo1';
let endpoint = 'https://api.ravenhub.io/company/MK6ey8wi3b/subscribers/'
 + subscriberId + '/events/owtDEKN0iP';
 
axios.post(endpoint, { "priority" : "Critical" }, {
 headers: {'Content-type': 'application/json'}
});

As soon as you send the request, you should see the notification center automatically update with a badge over the bell icon showing how many unread notifications there are because the Ravenhub notification system has real-time updates and takes advantage of the reactive nature of the React framework.

The last thing to note is that you can use the Ravenhub dashboard to see if your users are viewing or ignoring your notifications. You can also see if users are clicking on the buttons and calls to action in the notifications or just ignoring them. This can help you measure whether or not people find the notifications useful, or just annoying. It's important to keep your notifications useful and relevant to each user, otherwise they may simply ignore them.

For a deeper dive into getting started with Ravenhub, check out the getting started guide.