Skip to main content

ChatList

List Contacts

When we develop chat applications, we want to keep a list of the people we are messaging.

Here we can easily use the chatlist component.

kursat_avatar
Kursat
just now
Thank you so much.
1
emre_avatar
Emre
just now
Okey. I'll send you.

Example Usage

import { ChatList } from "react-chat-elements"

<ChatList
className='chat-list'
dataSource={[
{
avatar: 'https://avatars.githubusercontent.com/u/80540635?v=4',
alt: 'kursat_avatar',
title: 'Kursat',
subtitle: "Why don't we go to the No Way Home movie this weekend ?",
date: new Date(),
unread: 3,
}
]} />

Result

kursat_avatar
Kursat
just now
Why don't we go to the No Way Home movie this weekend ?
3

ChatList Props

propdefaulttypedescription
idnonestring | numberChatlist id
classNamenonestringoptional chat list className
dataSource[]arraychat list array
onClicknonefunctionchat list item on click (chat(object) returns)
onContextMenunonefunctionchat list item on context menu (chat(object) returns)
onAvatarErrornonefunctionchat list item on error avatar img
lazyLoadingImagenonestringlazy loading image path
onClickMutenonefunctionmute click function (chat(object) returns)
onClickVideoCallnonefunctionvideo call click function (chat(object) returns)
onDragOvernonefunctionondragover event
onDragEnternonefunctionondragenter event
onDropnonefunctionondrop event
onDragLeavenonefunctionondragleave event
onDragComponentnonefunctionthe component which showing while drag