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.
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.