React Bootstrap Chat
React Chat - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
Bootstrap chat is a component dedicated for text-based communication between two or more users in real time. Build with conversations list sidebar.
Basic example
-
Brad Pitt 12 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
Lara Croft 13 mins ago
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
-
Brad Pitt 12 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
import React, { Component } from "react";
import {
MDBCard,
MDBCardBody,
MDBRow,
MDBCol,
MDBListGroup,
MDBListGroupItem,
MDBAvatar,
MDBBadge,
MDBIcon,
MDBBtn,
} from "mdbreact";
import "./ChatPage.css";
class ChatPage extends Component {
constructor() {
super();
this.state = {
friends: [
{
name: "John Doe",
avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-8",
message: "Hello, Are you there?",
when: "Just now",
toRespond: 1,
seen: false,
active: true,
},
{
name: "Danny Smith",
message: "Lorem ipsum dolor sit",
avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-1",
when: "5 min ago",
toRespond: 0,
seen: false,
active: false,
},
{
name: "Alex Steward",
message: "Lorem ipsum dolor sit",
avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-2",
when: "Yesterday",
toRespond: 0,
seen: false,
active: false,
},
{
name: "Ashley Olsen",
message: "Lorem ipsum dolor sit",
avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-3",
when: "Yesterday",
toRespond: 0,
seen: false,
active: false,
},
{
name: "Kate Moss",
message: "Lorem ipsum dolor sit",
avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-4",
when: "Yesterday",
toRespond: 0,
seen: false,
active: false,
},
{
name: "Lara Croft",
message: "Lorem ipsum dolor sit",
avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5",
when: "Yesterday",
toRespond: 0,
seen: false,
active: false,
},
{
name: "Brad Pitt",
message: "Lorem ipsum dolor sit",
avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-6",
when: "5 min ago",
toRespond: 0,
seen: true,
active: false,
},
],
messages: [
{
author: "Brad Pitt",
avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-6",
when: "12 mins ago",
message:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
},
{
author: "Lara Croft",
avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5",
when: "13 mins ago",
message:
" Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.",
},
{
author: "Brad Pitt",
avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-6",
when: "14 mins ago",
message:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
},
],
};
}
render() {
return (
<MDBCard className="grey lighten-3 chat-room">
<MDBCardBody>
<MDBRow className="px-lg-2 px-2">
<MDBCol md="6" xl="4" className="px-0 mb-2 mb-md-0">
<h6 className="font-weight-bold mb-3 text-lg-left">Member</h6>
<div className="white z-depth-1 p-3">
<MDBListGroup className="friend-list">
{this.state.friends.map((friend) => (
<Friend key={friend.name} friend={friend} />
))}
</MDBListGroup>
</div>
</MDBCol>
<MDBCol md="6" xl="8" className="pl-md-3 px-lg-auto mt-2 mt-md-0">
<MDBRow>
<MDBListGroup className="list-unstyled pl-3">
{this.state.messages.map((message) => (
<ChatMessage
key={message.author + message.when}
message={message}
/>
))}
<li>
<div className="form-group basic-textarea">
<textarea
className="form-control pl-2 my-0"
id="exampleFormControlTextarea2"
rows="3"
placeholder="Type your message here..."
/>
<MDBBtn
color="info"
rounded
size="sm"
className="float-right mt-4"
>
Send
</MDBBtn>
</div>
</li>
</MDBListGroup>
</MDBRow>
</MDBCol>
</MDBRow>
</MDBCardBody>
</MDBCard>
);
}
}
const Friend = ({
friend: { name, avatar, message, when, toRespond, seen, active },
}) => (
<MDBListGroupItem
href="#!"
className="d-flex justify-content-between p-2 border-light"
style={{ backgroundColor: active ? "#eeeeee" : "" }}
>
<MDBAvatar
tag="img"
src={avatar}
alt="avatar"
circle
className="mr-2 z-depth-1"
/>
<div style={{ fontSize: "0.95rem" }}>
<strong>{name}</strong>
<p className="text-muted">{message}</p>
</div>
<div>
<p className="text-muted mb-0" style={{ fontSize: "0.75rem" }}>
{when}
</p>
{seen ? (
<span className="text-muted float-right">
<MDBIcon className="fa-check" aria-hidden="true" />
</span>
) : toRespond ? (
<MDBBadge color="danger" className="float-right">
{toRespond}
</MDBBadge>
) : (
<span className="text-muted float-right">
<MDBIcon icon="reply" aria-hidden="true" />
</span>
)}
</div>
</MDBListGroupItem>
);
const ChatMessage = ({ message: { author, avatar, when, message } }) => (
<li className="chat-message d-flex justify-content-between mb-4">
<MDBAvatar
tag="img"
src={avatar}
alt="avatar"
circle
className="mx-2 z-depth-1"
/>
<MDBCard>
<MDBCardBody>
<div>
<strong className="primary-font">{author}</strong>
<small className="pull-right text-muted">
<i className="far fa-clock" /> {when}
</small>
</div>
<hr />
<p className="mb-0">{message}</p>
</MDBCardBody>
</MDBCard>
</li>
);
export default ChatPage;
.chat-room .friend-list .list-group-item {
margin-bottom: 0;
border: 0;
border-bottom: 1px solid;
}
.chat-room .friend-list .list-group-item:last-of-type {
border-bottom: 0;
}
.chat-room .friend-list .list-group-item.active {
background-color: #eeeeee;
}
.chat-room .avatar {
height: 3rem;
width: 3rem;
}
.chat-room .chat-message:nth-of-type(even) {
flex-direction: row-reverse;
}
.chat-room .scrollable-friends-list {
height: 570px;
}
.chat-room .scrollable-chat {
height: 510px;
padding-bottom: 15px;
}
Chat with scrollbar
Member
.webp)
.webp)
-
Brad Pitt 12 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
Lara Croft 13 mins ago
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
-
Brad Pitt 12 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
Lara Croft 13 mins ago
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
-
Brad Pitt 12 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
import React, { Component } from "react";
import {
MDBCard,
MDBCardBody,
MDBRow,
MDBCol,
MDBListGroup,
MDBListGroupItem,
MDBAvatar,
MDBBadge,
MDBIcon,
MDBBtn,
MDBScrollbar,
} from "mdbreact";
import "./ChatPage.css";
class ChatPage extends Component {
constructor() {
super();
this.state = {
friends: [
{
name: "John Doe",
avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-8",
message: "Hello, Are you there?",
when: "Just now",
toRespond: 1,
seen: false,
active: true,
},
{
name: "Danny Smith",
message: "Lorem ipsum dolor sit",
avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-1",
when: "5 min ago",
toRespond: 0,
seen: false,
active: false,
},
{
name: "Alex Steward",
message: "Lorem ipsum dolor sit",
avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-2",
when: "Yesterday",
toRespond: 0,
seen: false,
active: false,
},
{
name: "Ashley Olsen",
message: "Lorem ipsum dolor sit",
avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-3",
when: "Yesterday",
toRespond: 0,
seen: false,
active: false,
},
{
name: "Kate Moss",
message: "Lorem ipsum dolor sit",
avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-4",
when: "Yesterday",
toRespond: 0,
seen: true,
active: false,
},
{
name: "Lara Croft",
message: "Lorem ipsum dolor sit",
avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5",
when: "Yesterday",
toRespond: 0,
seen: false,
active: false,
},
{
name: "Brad Pitt",
message: "Lorem ipsum dolor sit",
avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-6",
when: "5 min ago",
toRespond: 0,
seen: true,
active: false,
},
{
name: "Ken Ditto",
avatar: "https://mdbootstrap.com/img/Photos/Avatars/img(3).webp",
message: "Hello, Are you there?",
when: "Yesterday",
toRespond: 0,
seen: false,
active: false,
},
{
name: "Marta Wozniak",
message: "Lorem ipsum dolor sit.",
avatar: "https://mdbootstrap.com/img/Photos/Avatars/img(2).webp",
when: "5 min ago",
toRespond: 0,
seen: false,
active: false,
},
],
messages: [
{
author: "Brad Pitt",
avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-6",
when: "12 mins ago",
message:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
},
{
author: "Lara Croft",
avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5",
when: "13 mins ago",
message:
" Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.",
},
{
author: "Brad Pitt",
avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-6",
when: "14 mins ago",
message:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
},
{
author: "Lara Croft",
avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5",
when: "16 mins ago",
message:
" Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.",
},
{
author: "Brad Pitt",
avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-6",
when: "17 mins ago",
message:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
},
],
};
}
render() {
return (
<MDBCard className="grey lighten-3 chat-room">
<MDBCardBody>
<MDBRow className="px-lg-2 px-2">
<MDBCol
md="6"
xl="4"
className="px-0 mb-4 mb-md-0 scrollable-friends-list"
>
<h6 className="font-weight-bold mb-3 text-lg-left">Member</h6>
<MDBScrollbar>
<div className="white z-depth-1 p-3">
<MDBListGroup className="friend-list">
{this.state.friends.map((friend) => (
<Friend key={friend.name} friend={friend} />
))}
</MDBListGroup>
</div>
</MDBScrollbar>
</MDBCol>
<MDBCol md="6" xl="8" className="pl-md-3 mt-4 mt-md-0 px-lg-auto">
<div className="scrollable-chat">
<MDBScrollbar>
<MDBListGroup className="list-unstyled pl-3 pr-3">
{this.state.messages.map((message) => (
<ChatMessage
key={message.author + message.when}
message={message}
/>
))}
</MDBListGroup>
</MDBScrollbar>
</div>
<div className="form-group basic-textarea">
<textarea
className="form-control pl-2 my-0"
id="exampleFormControlTextarea2"
rows="3"
placeholder="Type your message here..."
/>
<MDBBtn
color="info"
rounded
size="sm"
className="float-right mt-4"
>
Send
</MDBBtn>
</div>
</MDBCol>
</MDBRow>
</MDBCardBody>
</MDBCard>
);
}
}
const Friend = ({
friend: { name, avatar, message, when, toRespond, seen, active },
}) => (
<MDBListGroupItem
href="#!"
className="d-flex justify-content-between p-2 border-light"
style={{ backgroundColor: active ? "#eeeeee" : "" }}
>
<MDBAvatar
tag="img"
src={avatar}
alt="avatar"
circle
className="mr-2 z-depth-1"
/>
<div style={{ fontSize: "0.95rem" }}>
<strong>{name}</strong>
<p className="text-muted">{message}</p>
</div>
<div>
<p className="text-muted mb-0" style={{ fontSize: "0.75rem" }}>
{when}
</p>
{seen ? (
<span className="text-muted float-right">
<MDBIcon className="fa-check" aria-hidden="true" />
</span>
) : toRespond ? (
<MDBBadge color="danger" className="float-right">
{toRespond}
</MDBBadge>
) : (
<span className="text-muted float-right">
<MDBIcon icon="reply" aria-hidden="true" />
</span>
)}
</div>
</MDBListGroupItem>
);
const ChatMessage = ({ message: { author, avatar, when, message } }) => (
<li className="chat-message d-flex justify-content-between mb-4">
<MDBAvatar
tag="img"
src={avatar}
alt="avatar"
circle
className="mx-2 z-depth-1"
/>
<MDBCard>
<MDBCardBody>
<div>
<strong className="primary-font">{author}</strong>
<small className="pull-right text-muted">
<i className="far fa-clock" /> {when}
</small>
</div>
<hr />
<p className="mb-0">{message}</p>
</MDBCardBody>
</MDBCard>
</li>
);
export default ChatPage;
.chat-room .friend-list .list-group-item {
margin-bottom: 0;
border: 0;
border-bottom: 1px solid;
}
.chat-room .friend-list .list-group-item:last-of-type {
border-bottom: 0;
}
.chat-room .friend-list .list-group-item.active {
background-color: #eeeeee;
}
.chat-room .avatar {
height: 3rem;
width: 3rem;
}
.chat-room .chat-message:nth-of-type(even) {
flex-direction: row-reverse;
}
.chat-room .scrollable-friends-list {
height: 570px;
}
.chat-room .scrollable-chat {
height: 510px;
padding-bottom: 15px;
}
React Chat - API
In this section you will find advanced information about the Chat component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use in working with it.
Chat import statement
Chat is more like template which we prepared to use with structured data, for example from external API. There is a need to import few components to build chat window.
import {
MDBCard,
MDBCardBody,
MDBRow,
MDBCol,
MDBListGroup,
MDBListGroupItem,
MDBAvatar,
MDBBadge,
MDBIcon,
MDBBtn,
MDBScrollbar
} from "mdbreact";
Chat - Friend Properties
The table below shows the structure of the 'friend' object which is destructured then as props of the Friend component.
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
name |
string | |
Name of the user. | name: "John Doe" |
avatar |
string | |
URL for the user's avatar | avatar: "https://mydomain.com/avatars/john_doe" |
message |
string | |
User's chat message | message: "Hello, how are you?" |
when |
string | |
Desciption, when message has been received | when: "1 minute ago" |
toRespond |
number | |
Amount of messages to respond indicator | toRespond: 2 |
seen |
boolean | |
Indicate that your message was seen | seen: false |
active |
boolean | |
Highlights the currently opened user chat window | active: true |
Chat - Message Properties
The table below shows the structure of the 'message' object which is destructured then as props of the ChatMessage component.
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
author |
string | |
User name of the message author | author: "John Doe" |
avatar |
string | |
URL for the user's avatar | avatar: "https://mydomain.com/avatars/john_doe" |
message |
string | |
User's chat message | message: "Hello, how are you?" |
when |
string | |
Desciption, when message has been received | when: "1 minute ago" |