Message List
Message List allows you to show a list of messages, for example, a chat log.
- Usage
- Styling
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
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
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',
},
]}
/>