Skip to main content

Date Separators

Date separators are an useful addition to long conversations, making it easier for the user to follow the conversation flow. The message list component allows you to implement separators in the ItemContent message by passing prevData and nextData props.

In addition to the separators, you might want to display a sticky date header, which is always visible when the messages are scrolled. To achieve this, you can use the useCurrentlyRenderedData hook to get the first message and display the date of the first message.

The example below demonstrates how to implement date separators in a message list.

loading...