Building notification toasts with React

While there are no out-of-the-box components in the @knocklabs/react-notification-feed library, it's easy to build toasts on top of the primitives exposed. In this guide, we'll show you just how to do that using the react-hot-toasts library as our "toaster".

See a live demo

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

Adding the KnockFeedProvider

We'll need to wrap our toast producing component 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.

Rendering toasts when new notifications come in

Our KnockFeedProvider exposes a useKnockFeed hook, which will return a feedClient we can use to bind to and receive real-time notifications being received on our feed.

Wrapping up

We can then test our workflow using the built-in test runner in Knock to produce messages, which will be received and displayed as a toast in your application.