Chat Bubble Component for ReactJS

A Chat bubble component for building Chat App in ReactJS.

Demo

Installing the react-chat-bubble

npm install --save react-chat-bubble

Using the Component

If you are using ES6 modules, if not, you are encouraged to use import and export instead.

Example:

import ChatBubble from 'react-chat-bubble';

class App extends Component {
  render() {
      <ChatBubble messages = {this.state.messages} />
  }
}
export default App;

The message object passed as prop should be of following format:

this.state.messages =
  [{
	    "type" : 0,
	    "image": "cat.jpg",
	    "text": "Hello! Good Morning!"
	}, {
	    "type": 1,
	    "image": "dog.jpg",
	    "text": "Hello! Good Afternoon!"
	}];

type = 0 for sender AND 1 for receiver
image = url of contact image
text = message from the user

To-do

> More style customization
> Delivered and seen status

Download Details:

Author: sabinbajracharya

Source Code: https://github.com/sabinbajracharya/react-chat-bubble

#react #reactjs #javascript