Building custom notifications UI with React

Using our @knocklabs/react-notification-feed and @knocklabs/client libraries, you can create fully custom notification UIs that are backed by the Knock Feed API and Websockets to receive and process real-time notifications in your web application.

In this guide, we'll take a look at creating a completely custom notifications page in our application.

Getting started

To use this example, you'll need an account on Knock, as well as an in-app feed channel with a workflow that produces in-app feed messages. You'll also need:

• A public API key for the Knock environment (set as KNOCK_PUBLIC_API_KEY)
• The channel ID for the in-app feed (set as KNOCK_FEED_CHANNEL_ID)

Installing dependencies

Adding the KnockFeedProvider

We'll need to wrap our notifications page in a KnockFeedProvider to setup a connection to Knock and connect to the authenticated user's feed. You can read more about the available props for the feed provider in the reference.

Creating a custom notifications page

In our notifications page, we'll use the store exposed by the KnockFeedProvider in order to render the list of notifications that ewe have available.

Creating a notification cell

We'll want to render a notification cell for every notification in our feed. Lets wrap that behavior up in a component for easy reuse:

Wrapping up

There's a lot more we can do with our notifications page, but we'll leave that as an exercise to the reader. Here are some examples:

• Adding mark as read, and archiving behavior to the notification cell
• Displaying a count of the total number of notifications

Check out the feed guide in the @knocklabs/client reference to learn about the available methods.