In-App UI
React
Headless UI
Feed

Build your own feed UI (headless)

How to build custom feed UI using our React hooks and client library.

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 Knock's 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

#

Implement KnockProvider

#

First, we'll need to implement the KnockProvider component somewhere in your component tree and authenticate against the Knock API using a user id and API key.

Setup the Knock client

#

Next, we'll need to access the instance of the Knock client created by the KnockProvider using the useKnockClient 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