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)
| props | default | type | description |
|---|---|---|---|
| audioProps | none | object | [key: string]: unknown |
| customStyle | none | - | audio message customStyle |
IAudioMessage (extends IMessage)
| props | default | type | description |
|---|---|---|---|
| data | none | object | contains audioURL, audioType, controlsList (below) |
| audioURL | none | string | audioURL must be in data object (optional) |
| audioType | none | 'audio/mp3' | string | audioType must be in data object (optional) |
| controlsList | none | string | controlsList must be in data object (optional) |
IMessage Props
| props | default | type | description |
|---|---|---|---|
| id | none | string | number | message id |
| position | none | string | message position |
| text | none | string | message text |
| title | none | string | message title |
| focus | none | boolean | message focus |
| date | none | number | Date | message date |
| dateString | none | string | message date string |
| avatar | none | string | message avatar |
| titleColor | none | string | message title color |
| forwarded | none | boolean | message forwarded |
| replyButton | none | boolean | message reply button |
| removeButton | none | boolean | message remove button |
| status | none | 'waiting'| 'sent' | 'received' | 'read' | message status |
| statusTitle | none | string | message status title |
| notch | none | boolean | message notch |
| copiableDate | none | boolean | message copiable date |
| retracted | none | boolean | message retracted |
| className | none | string | message className |
| letterItem | none | object | message letterItem contains id:string, letter:ReactChild |
| reply | none | object | any | message reply should be both any and object (contains message:string, photoURL:string) |
| type | none | string | message type |