Building custom notification feed UI with hooks (headless)
How to build custom notification feed UI using the hooks from the Knock React SDK.
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#
KnockProvider
Implement #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