Docs

Docs

Message List

Message List allows you to show a list of messages, for example, a chat log.

Message List allows you to show a list of messages, for example, a chat log. You can configure the text content, information about the sender, and the time of sending for each message.

Open in a
new tab
const [person, setPerson] = useState<Person>();
useEffect(() => {
  getPeople({ count: 1 }).then(({ people }) => setPerson(people[0]));
}, []);

const isoMinutes = 'yyyy-MM-dd HH:mm';
const yesterday = format(subDays(new Date(), 1), isoMinutes);
const fiftyMinutesAgo = format(subMinutes(new Date(), 50), isoMinutes);

const items = [
  {
    text: 'Linsey, could you check if the details with the order are okay?',
    time: yesterday,
    userName: 'Matt Mambo',
    userColorIndex: 1,
  },
  {
    text: 'All good. Ship it.',
    time: fiftyMinutesAgo,
    userName: 'Linsey Listy',
    userColorIndex: 2,
    userImg: person?.pictureUrl,
  },
];

return <MessageList items={items} />;

The messages in the list can be populated with the items property. The items property is of type Array, with JSON objects in it. Each JSON object is a single message.

Styling

You can style individual messages by adding a theme property to some items and providing CSS for that theme. The following example shows how to highlight the current user’s own messages:

Open in a
new tab
<MessageList
  items={[
    {
      text: 'Linsey, could you check if the details with the order are okay?',
      time: yesterday,
      userName: 'Matt Mambo',
      userColorIndex: 1,
    },
    {
      text: 'All good. Ship it.',
      time: fiftyMinutesAgo,
      userName: 'Linsey Listy',
      userColorIndex: 2,
      userImg: person?.pictureUrl,
      theme: 'current-user',
    },
  ]}
/>
Component Usage recommendations

Message Input

Allow users to author and send messages.