Building notification inboxes with React
How to build notification inboxes powered by Knock and React.
Our @knocklabs/react-notification-feed library can be used to build full-page inbox experiences, too. In this guide we'll show you how to have a basic inbox ready for your users in a few minutes.
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)
🌠
Find your channel ID. To find the channel ID for your in-app channel(s), go to "Integrations > Channels" in the Knock dashboard, navigate to the channel page of your in-app channel, and copy the channel ID.
Installing dependencies
Rendering the notification inbox
Here we're using the KnockFeedProvider to authenticate our current user and connect them to a Knock In-app Feed Channel. We then render the NotificationFeed component to give us a simple, complete notification inbox page.