import{ChatItem}from'react-chat-elements'<ChatItemavatar={'https://facebook.github.io/react/img/logo.svg'}alt={'Reactjs'}title={'Facebook'}subtitle={'What are you doing?'}date={newDate()}unread={0}/>
ChatItem props
prop
default
type
description
avatar
none
string
ChatItem avatar photo url
avatarFlexible
false
boolean
flexible ChatItem avatar photo
alt
none
string
ChatItem avatar photo alt text
title
none
string
ChatItem title
subtitle
none
string
ChatItem subtitle
date
none
date
ChatItem date
dateString
none
string
ChatItem represents dateString or moment(date).fromNow()
message type (text, photo, file, location, spotify)
text
none
string
message text
title
none
string
message title
titleColor
none
string(color)
message title color
data
{}
object
message data
date
new Date()
Date
message date
dateString
none
string
message represents dateString or moment(date).fromNow()
onClick
none
function
message on click (message(object) is returned)
onOpen
none
function
message on open (file or photo) (message(object) is returned)
onDownload
none
function
message on download (file or photo) (message(object) is returned)
onLoad
none
function
message on load photo
onTitleClick
none
function
message title on click event
onForwardClick
none
function
message forward on click event
onContextMenu
none
function
message contextmenu click event
forwarded
none
boolean
message forward icon
status
none
string
message status info (waiting, sent, received, read)
notch
true
boolean
message box notch
avatar
none
url
message box avatar url
renderAddCmp
none
function (component)
adding custom components to message box
copiableDate
false
boolean
message box date text copiable
SystemMessage Component
import{SystemMessage}from'react-chat-elements'<SystemMessagetext={'End of conversation'}/>
SystemMessage props
prop
default
type
description
text
none
string
message text
MessageList Component
import{MessageList}from'react-chat-elements'<MessageListclassName='message-list'lockable={true}toBottomHeight={'100%'}dataSource={[{position: 'right',type: 'text',text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',date: newDate(),},...]}/>
MessageList props
prop
default
type
description
className
none
string
optional message list className
dataSource
[]
array
message list array
lockable
false
boolean
It locks to scroll position when the dataSource has been changed
toBottomHeight
300
int or string(only '100%')
If the toBottomHeight property's value higher than bottom value of the scrollbar when the data source has been changed Scrollbar goes to bottom at the end of the page. If the toBottomHeight property's value has been set '100%', scrollbar goes to bottom at the end of the page when the data source has been changed.
onClick
none
function
message list item on click (message(object) is returned)
onOpen
none
function
message list item on open (file or photo) (message(object) is returned)
onDownload
none
function
message list item on download (file or photo) (message(object) is returned)
onScroll
none
function
message list onScroll event
onForwardClick
none
function
message list item onForwardClick event
downButton
true
boolean
message list scroll to bottom button
downButtonBadge
none
boolean
message list downButton badge content
onDownButtonClick
none
function
message list onDownButtonClick
onContextMenu
none
function
message list item onContextMenu event, gets 3 parameters: message item, index of item, event
ChatList Component
import{ChatList}from'react-chat-elements'<ChatListclassName='chat-list'dataSource={[{avatar: 'https://facebook.github.io/react/img/logo.svg',alt: 'Reactjs',title: 'Facebook',subtitle: 'What are you doing?',date: newDate(),unread: 0,},...]}/>
ChatList props
prop
default
type
description
className
none
string
optional chat list className
dataSource
[]
array
chat list array
onClick
none
function
chat list item on click (chat(object) is returned)
onContextMenu
none
function
chat list item on context menu (chat(object) is returned)
onAvatarError
none
function
chat list item on error avatar img
Input Component
import{Input}from'react-chat-elements'<Inputplaceholder="Type here..."multiline={true}rightButtons={<Buttoncolor='white'backgroundColor='black'text='Send'/>}/>// clear text eg:<Inputref='input'placeholder="Type here..."/>this.refs.input.clear();