Skip to main content


A simple date separator UI component for between messages. This component is rendered via the VirtualizedMessageList and MessageList components. See the render method processMessages for more info on the conditions for when the component is injected into the UI.

Basic Usage#

Since this component is added to the message lists within those components by default, you typically won't need to import and use this component individually unless it's in a date separator custom component. If you would like to disable the DateSeparator from appearing in the UI, utilize the disableDateSeparator prop on either the VirtualizedMessageList or MessageList components. You can also hide the component when new messages are received via the hideNewMessageSeparator prop on the same two list components.

Example 1 - Here's what it looks like for today's date:

const date = new Date();
<DateSeparator date={date} />;

Example 2 - A date in the past:

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#

This component may be overridden via the DateSeparator prop on Channel, which injects the new value into the ComponentContext. This value is then pulled for use in the rendering method in the list components.

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/>



The date to format, required.



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

(date: Date) => string

position 'left' | 'center' | 'right';#

Set the position of the date in the separator, options are 'left', 'center', 'right'.

'left' | 'center' | 'right''right'


Boolean for if the following messages are not new.


Did you find this page helpful?