Building notification inboxes with React
How to build notification inboxes powered by Knock and React.
Our @knocklabs/react 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 KnockProvider to authenticate our current user and get access to the Knock JavaScript client. Then we use the KnockFeedProvider to connect them to a Knock In-app Feed Channel. We then render the NotificationFeed component to give us a simple, complete notification inbox page.