Skip to main content

Audio Message

Message Box

Message Box

It is enough to define a message component with using "MessageBox".

However you have to specify type for them.

Esra

Example Usage

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

<MessageBox
position={"left"}
type={"audio"}
title={"Emre"}
data={{
audioURL: "https://www.sample-videos.com/audio/mp3/crowd-cheering.mp3",
}}
/>

Result

Emre

Audio Message Props

IAudioMessageProps (extends IAudioMessage)

propsdefaulttypedescription
audioPropsnoneobject[key: string]: unknown
customStylenone-audio message customStyle

IAudioMessage (extends IMessage)

propsdefaulttypedescription
datanoneobjectcontains audioURL, audioType, controlsList (below)
audioURLnonestringaudioURL must be in data object (optional)
audioTypenone'audio/mp3' | stringaudioType must be in data object (optional)
controlsListnonestringcontrolsList must be in data object (optional)

IMessage Props

propsdefaulttypedescription
idnonestring | numbermessage id
positionnonestringmessage position
textnonestringmessage text
titlenonestringmessage title
focusnonebooleanmessage focus
datenonenumber | Datemessage date
dateStringnonestringmessage date string
avatarnonestringmessage avatar
titleColornonestringmessage title color
forwardednonebooleanmessage forwarded
replyButtonnonebooleanmessage reply button
removeButtonnonebooleanmessage remove button
statusnone'waiting'| 'sent' | 'received' | 'read'message status
statusTitlenonestringmessage status title
notchnonebooleanmessage notch
copiableDatenonebooleanmessage copiable date
retractednonebooleanmessage retracted
classNamenonestringmessage className
letterItemnoneobjectmessage letterItem contains id:string, letter:ReactChild
replynoneobject | anymessage reply should be both any and object (contains message:string, photoURL:string)
typenonestringmessage type