react-chat-elements
react-chat-elements copied to clipboard
Is there any way to render a custom component inside the chat message?
I would like something like this
<MessageList
className="message-list"
dataSource={messages}
renderMessage={(message) => {
if(isCode(messagge.text)){
return <CodeSnippet code={message.text}/>
}else{
return <p>{message.text}</p>
}}
/>
Just found out you can use the text property to support under courtesy of @last-Programmer so your code may look like this:
<MessageList
className='message-list'
dataSource={messages.map(message => (
isCode(message.text) ? (
{...message, text: <CodeSnippet code={message.text}/>}
) : (
{...message, text: <p>{message.text}</p>}
)
/>