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.
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.
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.