Chat Bubble Component for ReactJS

A Chat bubble component for building Chat App in ReactJS.


Alt Chatbubble

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.


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


> More style customization
> Delivered and seen status

Download Details:

Author: sabinbajracharya

Source Code:

#react #reactjs #javascript

Chat Bubble Component for ReactJS
23.05 GEEK