Skip to main content

Message Box

Message Box Component​

Emre
What are you doing ?

Example Usage​

import { MessageBox } from "react-chat-elements";

<MessageBox
  position='left'
  title='Burhan'
  type='text'
  text="Hi there !"
  date={new Date()}
  replyButton={true}
/>

<MessageBox
  position="right"
  title="Emre"
  type="meetingLink"
  text="Click to join the meeting"
  date={new Date()}
/>

Result

Burhan
Hi there !
Emre
Click to join the meeting

MessageBox Props​

MessageType List​

typeprops details
textText Message Props
locationLocation Message Props
photoPhoto Message Props
videoVideo Message Props
meetingMeeting Message Props
systemSystem Message Props
fileFile Message Props
meetingLinkMeeting Link Message Props
audioAudio Message Props
spotifySpotify Message Props

IMessageBoxProps​

propsdefaulttypedescription
onMessageFocusednone-message box focused
renderAddCmpnoneReact.Componentmessage box renderAddCmp
onClicknonefunctionmessage box onClick event
onOpennonefunctionmessage box on open event
onPhotoErrornonefunctionmessage box onPhotoError
onContextMenunonefunctionmessage box onContextMenu
onForwardClicknonefunctionmessage box onForwardClick
onReplyClicknonefunctionmessage box onReplyClick
onRemoveMessageClicknonefunctionmessage box onRemoveMessageClick
onTitleClicknonefunctionmessage box onTitleClick
onReplyMessageClicknonefunctionmessage box onReplyMessageClick
onMeetingMessageClicknonefunctionmessage box onMeetingMessageClick
onDownloadnonefunctionmessage box onDownload
onMeetingMoreSelectnonefunctionmessage box onMeetingMoreSelect
onMeetingLinkClicknonefunctionmessage box onMeetingLinkClick
onMeetingTitleClicknonefunctionmessage box onMeetingTitleClick
onMeetingVideoLinkClicknonefunctionmessage box onMeetingVideoLinkClick