DateSeparator

A simple date separator component rendered between messages. It is injected by MessageList and VirtualizedMessageList.

Best Practices

• Use the default separator unless you need a custom date format or branded presentation.
• Keep custom separators lightweight because they are rendered inside the message list.
• Disable separators only if your UI already provides a clear time grouping.
• Prefer formatDate over rebuilding the component when only the label needs to change.
• If you need custom alignment or unread styling, provide your own component instead of relying on the legacy position and unread props.

Basic Usage

Since it is injected by default, you usually do not need to import it unless you are building a custom separator. To disable date separators, use disableDateSeparator on MessageList or VirtualizedMessageList.

import { DateSeparator } from "stream-chat-react";

const date = new Date();

<DateSeparator date={date} />;

UI Customization

Register a custom separator with WithComponents:

import {
  Channel,
  ChannelHeader,
  DateSeparator,
  MessageInput,
  MessageList,
  Thread,
  Window,
  WithComponents,
  type DateSeparatorProps,
} from "stream-chat-react";

const CustomDateSeparator = ({ date }: DateSeparatorProps) => (
  <DateSeparator
    date={date}
    formatDate={(value) => `The message date is ${value.toDateString()}`}
  />
);

const App = () => (
  <WithComponents overrides={{ DateSeparator: CustomDateSeparator }}>
    <Channel>
      <Window>
        <ChannelHeader />
        <MessageList />
        <MessageInput />
      </Window>
      <Thread />
    </Channel>
  </WithComponents>
);

The DateSeparatorProps type still includes position and unread, but the default v14 separator no longer changes its UI based on those values. If your design depends on them, implement that behavior in your own custom separator.

Props