Migrating from @knocklabs/react-notification-feed

This guide will help you migrate to the new Knock React library

This guide will walk you through the steps of replacing @knocklabs/react-notification-feed with @knocklabs/react.

Please report any issues you encounter while upgrading.

Installation

Install the new React package

Or if you're using Yarn:

Changes to Knock providers

@knocklabs/react introduces updated providers:

  • KnockProvider authenticates the current user and provides access to the Knock client. It now accepts userId, apiKey, and userToken props.
  • KnockFeedProvider connects to an in-app feed channel using the feedId prop and no longer accepts userId, apiKey, and userToken props.

Before using @knocklabs/react-notification-feed

This code sample demonstrates a typical implementation of the NotificationFeedPopover and annotates points of change in the component APIs.

After using @knocklabs/react

With the new React SDK, the KnockProvider component now wraps the KnockFeedProvider component and handles authenticating with Knock.

rootless removed and NotificationFeedContainer added

The KnockFeedProvider no longer wraps its children with default styles. If you were setting the rootless prop to true, this change has no effect. Otherwise, you should wrap your notification feed with the NotificationFeedContainer component to ensure the feed is properly styled.

Before

After

Use Knock hooks

You can continue to use the useKnockFeed hook to build headless feed experiences.

You can use the useKnockClient hook to access the Knock client.

What is Knock?→