Building in-app UI in React

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.

The Knock React SDK ships the following pre-built UI elements:

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

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

• MsTeamsChannelCombobox: for picking one or more Microsoft Teams channels to route notifications to.
• MsTeamsAuthButton: for managing the OAuth process between your Microsoft Teams bot and your customer's Microsoft Entra tenant.

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.

• Integrating the NotificationFeedPopover
• Real-time notification toasts
• Notification inbox
• Building custom notification UI using hooks
• Building a notification preferences page
• Building custom preferences interface using hooks

• @knocklabs/react on npm
• @knocklabs/client on npm
• Package on GitHub
• React SDK reference
• JS SDK reference