In this section, you'll find the complete documentation for the components exposed in @knocklabs/react-notification-feed, including the props available.
Note: You can see a reference for the methods available for the Knock class, as well as a Feed instance under the client JS docs.
Components
KnockFeedProvider
The top-level feed provider that connects to Knock with the given API key, authenticates a user, and then connects to a feed for that user.
Props
Accepts KnockFeedProviderProps:
apiKey*stringThe public API key for the environment
userId*stringThe ID of the user for which to retrieve a feed
feedId*stringThe channel ID of the in-app feed to be displayed
userTokenstringA JWT that identifies the authenticated user, signed with the private key provided in the Knock dashboard. Required to secure your production environment. Learn more. hoststringA custom API host for Knock
defaultFeedOptionsFeedClientOptionsSet defaults for `tenant`, `has_tenant`, `source`, `archived` to scope all subsequent feed queries
colorModeColorModeSets the theme as either light or dark mode (defaults to light)
rootlessbooleanWhen set as false, doesn't wrap the children in a `<KnockFeedContainer>`
i18nI18nContentAn optional set of translations to override the default `en` translations used in the feed components
NotificationFeed
Props
EmptyComponent*ReactNodeThe empty component to render, when not set defaults to <EmptyFeed />.
renderItemfunctionA function invoked per `FeedItem` to be rendered that should return a cell to be rendered in the feed. Useful when you want to render a custom feed cell. Defaults to rendering a `NotificationCell`.
onNotificationClickfunctionA custom function to be invoked when a notification cell is clicked.
onMarkAllAsReadClickfunctionA custom function to be invoked when the `Mark all as read` button is clicked.
NotificationFeedPopover
Renders a NotificationFeed in a floating popover, rendered by popper-js.
Props
Accepts the same base props as NotificationFeed, and overrides with the following:
isVisible*booleanWhether or not to show the popover.
onClose*functionThe function to be invoked when the popover is closed.
onOpenfunctionA function that's invoked whenever the feed popover is opened, useful for updating any items in view and marking them as read, seen, or archived.
buttonRef*RefObject<HTMLElement>A ref of the button to position the popover adjacent to.
closeOnClickOutsidebooleanWhen true, will close the popover whenever any area outside of the popover is clicked.
placementPlacementDetermines the popper-js position of the popover (defaults to `bottom-end`).
NotificationCell
Props
item*FeedItemThe feed item (notification) to render
onItemClickfunctionThe function to be invoked when the row is clicked
avatarReactNodeRender a custom avatar for the feed item
archiveButtonReactNodeRender a custom archive button for the feed item
childrenReactNodeA set of children to render inside of the cell, will be rendered under the main content in a `rnf-notification-cell__child-content` div. Useful for rendering action buttons.
Renders a notification bell icon, with a badge showing the number of unseen items present in the notification feed.
Props
onClick*functionThe function to be invoked when the IconButton is clicked
badgeCountTypeenumOne of `unseen` | `unread` | `all` to determine which count to display
A generic Button component that can be used to add action buttons to items in a notifcation feed.
Props
variantstringThe variant of the button; either `primary` or `secondary`. Defaults to `primary`.
loadingTextstringText to display while the button is loading.
isLoadingbooleanWhen true, will display a spinner next to the `loadingText` (if present).
isDisabledbooleanWhen true, will mark the button as disabled.
isFullWidthbooleanWhen true, will make the button occupy 100% of the parent container.
onClick*functionThe click handler to be invoked when the button is clicked.
childrenReactNodeThe text to display inside of the button.
Used to group and space multiple Button components into a single line.
Props
children*ReactNodeOne or more `Button` components
KnockI18nProvider
A provider to inject translations into components.
Props
i18nI18nContentA set of translations and a locale to use in child components via the `useTranslations` hook
children*ReactNodeOne or more `Button` components
Hooks
useKnockFeed
The KnockFeedProvider exposes a useKnockFeed hook for all child components.
Returns: KnockFeedProviderState
knockKnockThe instance of the Knock client
feedClientFeedThe instance of the authenticated Feed
useFeedStoreUseStore<FeedStoreState>A zustand store containing the FeedStoreState
statusFilterStatusCurrent value of the filter status for the Feed
setStatusfunctionA function to set the current FilterStatus
colorModeColorModeThe current theme color
Example:
useAuthenticatedKnockClient
Creates an authenticated Knock client.
Returns: Knock instance, authenticated against the user
Example:
useNotifications
Creates a Feed instance for the provided Knock client which creates a stateful, real-time connection to Knock to build in-app experiences.
Returns: Feed instance
Example:
useTranslations
Exposed under KnockI18nProvider child components.
Returns:
localestringThe current locale code (defaults to `en`)
t(key: string) => stringA helper function to get the value of a translation from the current `Translations`.
dateFnsLocale() => LocaleReturns a Locale for use in date-fns. Defaults to `en-US`.
Types
I18nContent
Used to set translations available in the child components exposed under KnockFeedProvider. Used in the useTranslations hook.
Note: locale must be a valid locale code.