DateSeparator

A simple date separator component rendered between messages. It’s injected by VirtualizedMessageList and MessageList. See the render method processMessages for more info on the conditions for when the component is injected into the UI.

Best Practices

• Use the default separator unless you need a brand-specific format.
• Keep custom separators lightweight to avoid list rendering overhead.
• Disable separators only if your UX provides another temporal cue.
• Match formatDate with your locale and time format strategy.
• Test separators in long histories and across time zones.

Basic Usage

Since it’s injected by default, you usually don’t need to import it unless you’re building a custom date separator. To disable it, use disableDateSeparator on VirtualizedMessageList or MessageList. You can also hide the “new messages” separator via hideNewMessageSeparator.

Example 1 - Today’s date:

const date = new Date();

<DateSeparator date={date} />;

Example 2 - A past date:

const date = new Date("December 17, 1995 03:24:00");

<React.Fragment>
  <DateSeparator date={date} />
  <DateSeparator date={date} position="center" />
  <DateSeparator date={date} position="left" />
</React.Fragment>;

UI Customization

Override it via the DateSeparator prop on Channel, which injects the component into ComponentContext for list rendering.

Example 1 - An example of a custom date separator:

export const YourCustomDateSeparator = (props: DateSeparatorProps) => {
    const { date } = props

    function formatDate(d: Date) {
        return `The message date is: ${d.toDateString()}`;
    }

    return (
        <DateSeparator
            formatDate={formatDate}
            date={date}
            position={'center'}
        />
    )
};

<Channel DateSeparator={YourCustomDateSeparator}>
    // the Channel children components
/>

Props

date

The date to format, required.

formatDate

Function to override the default formatting of the date. Has access to the original date object.

position

Set the position of the date in the separator.

unread

Whether the following messages are unread.