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 timeagojs(now, date)
message type (text, photo, file, location, spotify, video, audio)
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 timeagojs(now, date)
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
onPhotoError
none
function
message on error photo
onTitleClick
none
function
message title on click event
onForwardClick
none
function
message forward on click event
onReplyClick
none
function
message reply on click event
onMeetingMessageClick
none
function
meeting message on click event
onMeetingTitleClick
none
function
meeting title message on click event
onMeetingVideoLinkClick
none
function
meeting video link message on click event
onReplyMessageClick
none
function
reply message on click event
onRemoveMessageClick
none
function
message remove on click event
onMeetingMoreSelect
none
function
message list item onMeetingMoreSelect event, gets 3 parameters: message item, index of item, event
onMeetingLinkClick
none
function
meeting link on click event
onContextMenu
none
function
message contextmenu click event
forwarded
none
boolean
message forward icon
replyButton
none
boolean
message reply icon
removeButton
none
boolean
message remove 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
focus
false
boolean
used in message focus feature in MessageList component, makes style of the component focused
onMessageFocused
none
function
makes focus value false after the message becomes focus
reply
none
object
reply data
retracted
none
boolean
message deleted or retracted
forwardedMessageText
Forwarded
string
forwarded message text
Reply Message Component
import{MessageBox}from'react-chat-elements';<MessageBoxreply={{photoURL: 'https://facebook.github.io/react/img/logo.svg',title: 'elit magna',titleColor: '#8717ae',message: 'Aliqua amet incididunt id nostrud',}}onReplyMessageClick={()=>console.log('reply clicked!')}position={'left'}type={'text'}text={'Tempor duis do voluptate enim duis velit veniam aute ullamco dolore duis irure.'}/>
MeetingMessage Component
import{MeetingMessage}from'react-chat-elements'<MeetingMessagesubject={'New Release'}title={'in ullamco'}date={newDate()}collapseTitle={'Commodo aliquip'}participants={[{id: '1',title: 'Facebook',},...]}dataSource={[{id: '1',avatar: 'https://facebook.github.io/react/img/logo.svg',message: 'Lorem ipsum dolor sit amet.',title: 'Elit magna',avatarFlexible: true,date: newDate(),event: {[title: 'Toplantı sona erdi!',avatars={[src: 'https://facebook.github.io/react/img/logo.svg']}]}record: {[avatar: 'https://facebook.github.io/react/img/logo.svg',title: 'Arama',savedBy: 'Kaydeden: Elit magna',time: newDate(),]}},...]}/>
MeetingMessage props
prop
default
type
description
subject
none
string
Meeting messagee
title
none
string
Meeting title
date
new Date()
Date
Meeting date
collapseTitle
none
string
Meeting subtitle
participants
[]
array
Meeting participant array
moreItems
none
array
message more items
dataSource
[]
array
meeting list array
onClick
none
function
meeting message on click event (message(object) is returned)
onMeetingTitleClick
none
function
meeting title message on click event (message(object) is returned)
onMeetingVideoLinkClick
none
function
meeting video link message on click event (message(object) is returned)
onMeetingMoreSelect
none
function
message list item onMeetingMoreSelect event, gets 3 parameters: message item, index of item, event
MeetingLink Component
import{MeetingLink}from'react-chat-elements';<MeetingLinkmeetingID='1'title='Lorem ipsum dolor sit amet.'/>
MeetingLink props
prop
default
type
description
meetingID
none
string
Meeting Link id
title
none
string
Meeting Link title
onMeetingLinkClick
none
function
meeting link on click event
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'messageListReferance=React.createRef();<MessageListreferance={messageListReferance}className='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
referance
none
object
message list ref
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
onReplyClick
none
function
message list item onReplyClick event
onReplyMessageClick
none
function
message list item onReplyMessageClick 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
onPhotoError
none
function
message list item on error photo
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)
The message list component has a breaking bug. I believe it's because it uses string refs, and my project is using functional components.
It shows the following error:
Error: Element ref was specified as a string (message) but no owner was set. This could happen for one of the following reasons:
You may be adding a ref to a function component
You may be adding a ref to a component that was not created inside a component's render method
How can I return the id or message of an item when I click on the component MessageList, I have looked at some properties like onClick, onOpen, onForwardClick.
When I use one of them it works only when I start the page or when I send a new message and not when I click on a ja loaded in the dataSource inside the
Why does MessageList overwrite fields like onTitleClick from the props passed to the single MessageBoxes with an according prop from the MessageList even if the prop in the MessageList was not even set? onTitleClick={this.props.onTitleClick && ((e) => this.onTitleClick(x, i, e))}
Even if the prop would have been set in the messagelist, the prop from the individual messagebox should be considered more important.
hello,
as mentioned in the title just 3 components worked in react native ( ChatItem, MessageBox and MessageList ) others doesn't exported yet.. need some react-native contributors ?
Getting below error when using this package with react 16.x.x version. When I drill down, I figured out that one of the dependencies of this package expects the react to be 15.x.x (using React.createClass() that is not now available in 16.x.x)
Can you make this package work with React 16.x.x ?
Below is the error we see in browser's developer console when this package is used with React 16.x.x
React.createClassisnotafunctionTypeError: React.createClassisnotafunctionatObject.<anonymous> (http://localhost:3030/_next/-/page/index.js:56379:23)
at webpackJsonp.../node_modules/react-progressbar.js/dist/react-progressbar.js.Object.assign.i (http://localhost:3030/_next/-/page/index.js:56351:37)
Hi, I'm new to react js and I want to enable developement mode of react-chat-elements which enable changes of source code will effect immediately to the code. Can you kindly support it?
Proje herhangi bir react projesine dahil edildiğinde jsx sorunu ile karşılaşılıyor. Projeyi dist şeklinde bir klasör'e çıkarıp oradan publish yapılması gerekiyor. Böylelikle bu kütüphane import edebilecek. Yapılan fikirler veya geliştirmeler burada paylaşılabilir. cc @altayaydemir
The code in Input.js looks like this:
`
if (this.props.multiline === true) {
if (this.props.autoHeight === true) {
e.target.style.height = this.props.minHeight + 'px';
Hello, in the project that i'm currently working, the date needs to be showed in the standard format like: 07/03/2021 - 12:57, but instead it is showing "x minutes ago". Is there some way to show like that? i've already tried using moment but all that it returns is false instead of a date.
And this is how i'm building the message object(i'm using messageList, so i generate those messages in a array): const objMsg = { type: 'text', text: oc.description, date: new Date(oc.dateTime), position: oc.driverId ? 'left' : 'right' }
The Input component should have autoComplete='off' so that password managers and such don't suggest things in the chat input. Either that or accept autoComplete as a prop for the Input component.
From looking at the src folder I see that it should automagically scroll down to the bottom when it's initialized. The issue is that I can't seem to get that to work on our project. Neither when the component is initialized or when the datasource changes. Could you help please?
Thanks for providing useful tool.
I am new to the react.
May i ask how can i present the voice message on the message list since the type "audio" does not exist?
I saw the props named "renderAddCmp" i guess i should use this but i dont know how.
Thanks for helping!!
I was using this library to build a chat app but got into a problem for testing the button which we pass as a prop in Input component. Using Jest to test the components and want to simulate on Button click.
I got this error when calling MessageList component
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
functional component mode
react 16.13.1
next latest