Building notification inboxes with 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)

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.

Next steps

• Common recipes for customizing the feed
• Using custom UI for a notification page
• Complete reference for the React library