Building notification toasts with React

How to build notification toasts powered by Knock and React.

While there are no out-of-the-box toast components in the @knocklabs/react 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)
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

Adding the Knock providers

We'll need to wrap our toast producing component in a KnockProvider and 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 providers 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.