Build your own feed UI (headless)
How to build custom feed UI using our React hooks and client library.
Using our @knocklabs/react-native
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#
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
).
Common feed recipes#
Filtering/scoping a feed#
A feed can be scoped by any of the parameters that are accepted on the feed endpoint via the FeedClientOptions
set in the defaultFeedOptions
for the KnockFeedProvider
component, or via the useNotifications
hook.
You can read more in this guide on feed filtering.