weichat

react-mui-chat

React chat component, based on Material-UI framework

Features

• 📱 Responsive styles
• 3️⃣ Contact unread message counter
• 🖥 Fullscreen and compatible modes
• 🔥 Automatic scroll to first unread message
• ⚡️ Automatic scroll to bottom, if contact hasn't unread messages

Requirements

• React
• ES6

Install

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

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

Usage

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!

Props

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

Styles

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

To do (MVP):

1. Add contacts Search field ✅
2. Add scroll to first unread message ✅
3. Add dates between messages ✅
4. Add additional content block for message
5. Add hotkeys for sending messages
6. Refactoring to npm-package
7. Add examples of usage