Skip to main content

Headers and Footers

The message list component accepts Header and Footer components that can be used to display additional content at the top and bottom of the list. Additionally, StickyHeader and StickyFooter components can be used to create sticky headers and footers.

caution

The custom components should not be defined as inline prop values. Doing so will re-declare the component on every render, causing unnecessary re-renders. If you need to access certain changing values inside the custom components, use the context prop.

The example below features a basic list with Header and Footer specified.

loading...

Unlike the regular ones, the sticky custom components are persistently visible in the viewport, making them suitable for displaying custom UI (like pinned messages, for example). Their size is getting measured, so that the first/last messages are not obscured by them.

loading...

By default, the sticky header and footer will offset the list content. In some cases, we would like to avoid that - for example, the scroll to bottom button should not leave space below the messages. To achieve that, we can wrap the content with a position: absolute container.

loading...

Combining Sticky and Regular Components​

If needed, you can combine sticky and regular components. The sticky ones will be always visible, while the regular ones will scroll with the content.

loading...