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".
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
- The channel ID for the in-app feed (set as
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
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.
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.