Customizing the feed

While we provide a pre-built set of React components, you may wish to use your own styles to better match your product's design system. In this guide we'll show you how to customize Knock components.

Note: our feed components are currently only available for React.js. Read about bringing your own UI or contact us if you want to discuss how to build components for other platforms.

Adding an onclick handler to the notification cell

You can customize the click handler for the notification cell as follows:

Both the NotificationFeed and the NotificationFeedPopover take a onNotificationClick prop.

Rendering a different notification cell in the feed

You can customize the rendering of a notification cell in the feed by overriding the renderItem prop.

Overriding the avatar

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:

Using dark mode

The feed supports an optional colorMode prop, that defaults to light but can be set as dark for dark mode support.

Adding inline actions

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 NotificationFeed or NotificationFeedPopover to render the custom notification cell.

Using action buttons

We ship Button and 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.

Targeting a specific workflow to have buttons

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 WorkflowSource:

Button Props

The Button exposes the following props.

variantprimary or secondary (defaults to primary)
onClickAn event handler to be invoked on click
loadingTextText to display when isLoading is true
isLoadingWhen true, will show a spinner (defaults to false)
isDisabledWhen true, will disable the button (defaults to false)
isFullWidthWhen true, make the button occupy the width of the container (defaults to false)

Adding other inline actions

If you have a more advanced use case, you can render any inline component you wish using the same technique as above.

Customizing the theme

The complete theme that controls the look and feel of the feed components can be customized for theme in a few different ways:

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

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