Building in-app UI in React
Learn more about the in-app notifications experiences you can build in React with Knock. Easily power notification feeds, toasts, and inbox experiences.
Our @knocklabs/react library lets you create notification experiences using Knock's APIs. It comes with pre-built UI components that you can use to easily get up and running with a fully functional notification feed experience in your product.
⚠️
New Knock React components. If you're currently using
@knocklabs/react-notification-feed, check out our migration guide to learn how to use our new React library.Pre-built components
The Knock React SDK ships the following pre-built UI elements:
In-app notifications
NotificationFeedPopover: a managed popover for displaying a list of notifications.NotificationFeed: a full-page list of notifications.NotificationIconButton: for adding a bell icon to your application that shows the current count of unread or unseen notifications.
SlackKit
SlackChannelCombobox: for picking one or more Slack channels to route notifications to.SlackAuthButton: for managing the OAuth process between your Slack application and your customer's Slack workspace.
Hooks for headless UI
If you don't want to use the pre-built UI components, you can also use this library in a headless way and bring your own UI. The Knock React SDK includes a complete set of React hooks that you can use to build your own UI on top of.
Guides
- Integrating the
NotificationFeedPopover - Real-time notification toasts
- Notification inbox
- Building custom notification UI using hooks
- Building a notification preferences page