web
mobile

React Bootstrap Chat MDB Pro component

React Chat - Bootstrap 4 & Material Design

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

  • avatar
    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.

    avatar
  • avatar
    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

  • avatar
    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.

    avatar
  • avatar
    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.

    avatar
  • avatar
    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).jpg",
      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).jpg",
      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;
      }
    

NEW We've added MORE STUFF to PRO & BUNDLE.

NEW PRICING

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"