Building notification toasts with 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."
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 Knock providers
We'll need to wrap our toast producing component in a KnockProvider and KnockFeedProvider to set up 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.