Building custom notifications UI with React
@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.
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
- The channel ID for the in-app feed (set as
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:
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.