Skip to contentSkip to content

ChatDateDivider API

API reference docs for the React ChatDateDivider component. Learn about the props, CSS, and other APIs of this exported module.

Demos

Import

import { ChatDateDivider } from '@mui/x-chat/ChatMessage';
// or
import { ChatDateDivider } from '@mui/x-chat';

Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

NameTypeDefaultDescription
shouldShowDividerfuncRenders when `message.createdAt` falls on a different UTC calendar day than the previous message's.

Decides whether the divider renders above the message, replacing the built-in rule when provided. date/previousDate are the parsed createdAt values (null when missing or invalid); previousMessage is null for the first message in the list.

Signature:function(params: object, params.message: ChatMessage, params.previousMessage: ChatMessage | null, params.index: number, params.date: Date | null, params.previousDate: Date | null) => boolean
  • params The parameters used to decide whether to render the divider.
  • params.message The message the divider would render above.
  • params.previousMessage The previous message, or null for the first message in the list.
  • params.index The index of the message in the list.
  • params.date The parsed createdAt of the message, or null when missing or invalid.
  • params.previousDate The parsed createdAt of the previous message, or null when missing or invalid.
The component cannot hold a ref.

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.