collinkatz / mui-chat-box

mui-chat-box

React component for creating a simple chat box.

Demo

Getting Started

Installing Package

mui-chat-box can be installed directly via npm by executing the following command:

npm install mui-chat-box

Usage

import { Avatar } from "@mui/material";
import { ChatBox, ReceiverMessage, SenderMessage } from "mui-chat-box";

export const App = () => (<ChatBox>
  <ReceiverMessage avatar={<Avatar>KS</Avatar>}>
    Hello how are you?
  </ReceiverMessage>
  <SenderMessage avatar={<Avatar>NA</Avatar>}>
    I'm good thanks you?
  </SenderMessage>
  <ReceiverMessage avatar={<Avatar>KS</Avatar>}>
    I'm good too!
  </ReceiverMessage>
</ChatBox>)

Samples

The react-example folder contains an example of how you could use the mui-chat-box.

Contributing

1. Issue
2. Fork
3. Hack!
4. Pull Request