Weichat NPM | npm.io

react-mui-chat

React chat component, based on Material-UI framework

If you use NPM: npm i react-mui-chat

If you use Yarn: yarn add react-mui-chat

First of all - import component from library:

import React from 'react';
import MuiChat from 'react-mui-chat';

Then, add componnet to your code:

<section>
  <MuiChat>
</section>

That's all!

Name	Type	Description
chatStyles	object	In this param you will pass all the chat styles properties (see more information under the table).
contacts	array	Array of objects with contacts.
selectedContact	object	Selected contact object, with mandatory fields: index (integer), messages (array)
onContactClick	function	On contact click handler
onSendBtnClick	function	On send button click handler
showContactsFilterInput	boolean	Flag for show/hide contacts filter input field
onContactsFilterChange	function	Handler, that recieve value of contact filter input
contactsFilterField	boolean	Turn on/off contacts filter textfield
msgDateFormat	string	Moment date formatting string. See more on Moment docs

You need to pass 'chatStyles' prop (from the table above)

<section>
  <MuiChat chatStyles={{
    contactsColWidth: '350px',
    outcomingMsgColor: '#9b38ff',
  }}>
</section>

Name	Type	Default	Description
incomingMsgColor	string	#eee	Incoming message background color
outcomingMsgColor	string	#2196f3	Outcoming message background color
contactsColWidth	string	300px	Width of contacts column
selectedContactColor	string	#2196f3	Background color of selected contact

3 years ago

3 years ago

3 years ago