Building custom notifications UI with hooks (headless)

Using our @knocklabs/react and @knocklabs/client libraries, you can create fully custom notification UIs that are backed by the Knock Feed API and real-time service.

In this guide, we'll take a look at creating a completely custom notifications UI in our application in a headless way using the Knock hooks.

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

Setup the Knock client

First, we'll need to authenticate against the Knock API and setup an instance of a Knock client using the useAuthenticatedKnockClient hook.

Setup the Knock feed instance

Next, we'll want to set up an instance of a Knock Feed, which will handle the state management and provide a way for us to interact with the messages on the feed.

Creating a custom notifications UI

The last step is to render our notifications UI using the data that's exposed via the state store (items and metadata).

Wrapping up

There's a lot more we can do with our notifications UI, 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