DateSeparator

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

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 ‘left’ | ‘center’ | ‘right’;

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

unread

Boolean for if the following messages are not new.