Building notification feeds with React
@knocklabs/react-notification-feed library comes pre-built with a real-time feed component that you can drop into your application. In this guide, you'll find common recipes to help you work with the Knock feed component.
- Quick start guide on adding a notification feed
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
To add a real-time notifications feed to your product, you can use the out-of-the-box components that the
@knocklabs/react-notification-feed library offers.
You can customize the click handler for the notification cell as follows:
NotificationFeed and the
NotificationFeedPopover take a
You can customize the rendering of a notification cell in the feed by overriding the
You can customize the
Avatar component rendered within the
NotificationCell by passing a different
avatar component into the
NotificationCell in the
renderItem function passed to the feed:
The feed supports an optional
colorMode prop, that defaults to
light but can be set as
dark for dark mode support.
For more advanced use cases, you may need to provide inline actions on your notifications. The
NotificationCell component accepts a
children prop in order for you to render actions. You'll need to override the
renderItem prop on the
NotificationFeedPopover to render the custom notification cell.
ButtonGroup components, which have a complementary set of styling for the rest of the feed. You can render the buttons in a button group so that they'll be grouped together, or can render them individually.
Note: remember to call
event.stopPropagation in your
onClick handler to stop the notification
onClick handler from being invoked.
A common use case is to only show action buttons for certain workflows. You can achieve this via the
item.source property, which exposes a
You can find a full list of the props available for the
Button component here.
The complete theme that controls the look and feel of the feed components can be customized for theme in a few different ways:
Customizing the CSS variables. The feed is written using CSS variables, which you can override to better match the look and feel of your product. The best way to see the possible CSS variables in use is to look at the theme.css source code.
Bringing your own CSS. It's possible to override the Knock CSS entirely to customize the look and feel of the feed. All of the feed classes are unique and start with
rnf-. You can see the classes in use by looking at the source code of the components.