Rich-React

React js UI example. Messages

React js UI example and template, Messages! . Take a look at this UI example and see how it can enhance your project. Your can copy or download the code and use it in your project. Don't forget to browse our library of other free React Native templates for even more design and functionality inspiration. Happy coding!
Tags: messages,chat

Preview Code

1. First, we need fresh reactjs setup, and for that, we need to run below commands into out terminal, and also we should have latest node version installed on our system:

npx create-react-app my-awesome-project

cd my-awesome-project

npm start

2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:

npm install [email protected] --save

npm start //For start project again

3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:

import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';


function App() {
  
	return (
		<div>
			
                    
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="container bootstrap snippets bootdey">
    <div class="row">
        <a href="#/" class="btn btn-info  send-message-btn" role="button"><i class="fa fa-search"></i> Search</a>
        <a href="#/" class="btn btn-info  send-message-btn" role="button"><i class="fa fa-gears"></i> Settings</a>
    </div>
    <div class="row">
        <div class="conversation-wrap col-md-3">
            <div class="media conversation">
                <a class="pull-left" href="#/">
                    <img class="media-object img-circle"  style={{/*width: 50px; height: 50px;*/}} src="https://bootdey.com/img/Content/user_2.jpg"/>
                </a>
                <div class="media-body">
                    <h5 class="media-heading">Michael clarkt</h5>
                    <small class="text-muted">Lorem ipsum dolor...</small>
                </div>
            </div>

            <div class="media conversation">
                <a class="pull-left" href="#/">
                    <img class="media-object img-circle"  style={{/*width: 50px; height: 50px;*/}} src="https://bootdey.com/img/Content/user_1.jpg"/>
                </a>
                <div class="media-body">
                    <h5 class="media-heading">Pauline mothg</h5>
                    <small class="text-muted">Cras commodo...</small>
                </div>
            </div>

            <div class="media conversation">
                <a class="pull-left" href="#/">
                    <img class="media-object img-circle" style={{/*width: 50px; height: 50px;*/}} src="https://bootdey.com/img/Content/user_3.jpg"/>
                </a>
                <div class="media-body">
                    <h5 class="media-heading">Manuel mcKlein</h5>
                    <small class="text-muted">Cras sit amet...</small>
                </div>
            </div>

            <div class="media conversation">
                <a class="pull-left" href="#/">
                    <img class="media-object img-circle" style={{/*width: 50px; height: 50px;*/}} src="https://bootdey.com/img/Content/User_for_snippets.png"/>
                </a>
                <div class="media-body">
                    <h5 class="media-heading">Markt prame</h5>
                    <small class="text-muted">Morbi felis...</small>
                </div>
            </div>

            <div class="media conversation">
                <a class="pull-left" href="#/">
                    <img class="media-object img-circle"style={{/*width: 50px; height: 50px;*/}} src="https://bootdey.com/img/Content/user-453533-fdadfd.png"/>
                </a>
                <div class="media-body">
                    <h5 class="media-heading">Bort snudert</h5>
                    <small class="text-muted">Vivamus semper...</small>
                </div>
            </div>

            <div class="media conversation">
                <a class="pull-left" href="#/">
                    <img class="media-object img-circle" style={{/*width: 50px; height: 50px;*/}} src="https://bootdey.com/img/Content/HexGames349.jpg"/>
                </a>
                <div class="media-body">
                    <h5 class="media-heading">Maria monthg</h5>
                    <small class="text-muted">cursus ac...</small>
                </div>
            </div>
        </div>



        <div class="message-wrap col-md-8">
            <div class="msg-wrap">
                <div class="media msg ">
                    <a class="pull-left" href="#/">
                        <img class="media-object    img-circle" style={{/*width: 32px; height: 32px;*/}} src="https://bootdey.com/img/Content/user_2.jpg"/>
                    </a>
                    <div class="media-body">
                        <small class="pull-right time"><i class="fa fa-clock-o"></i> 12:10am</small>
                        <h5 class="media-heading">Pauline mothg</h5>
                        <small class="col-md-10 text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam convallis, augue sed euismod varius, nisl metus vestibulum neque, nec dictum est dui et tellus</small>
                    </div>
                </div>
                <div class="alert alert-info msg-date">
                    <strong>Today</strong>
                </div>
                <div class="media msg">
                    <a class="pull-left" href="#/">
                        <img class="media-object   img-circle" style={{/*width: 32px; height: 32px;*/}} src="https://bootdey.com/img/Content/user_2.jpg"/>
                    </a>
                    <div class="media-body">
                        <small class="pull-right time"><i class="fa fa-clock-o"></i> 12:10am</small>
                        <h5 class="media-heading">Pauline mothg</h5>
                        <small class="col-md-10 text-muted">Interdum et malesuada fames ac ante ipsum primis in faucibus. In at lacus ac velit vehicula elementum at a lorem. Nullam quis augue sodales, porttitor orci non"</small>
                    </div>
                </div>

                <div class="media msg">
                    <a class="pull-left" href="#/">
                        <img class="media-object  img-circle" data-src="holder.js/64x64" alt="64x64" style={{/*width: 32px; height: 32px;*/}} src="https://bootdey.com/img/Content/user_2.jpg"/>
                    </a>
                    <div class="media-body">
                        <small class="pull-right time"><i class="fa fa-clock-o"></i> 12:10am</small>
                        <h5 class="media-heading">Pauline mothg</h5>
                        <small class="col-md-10 text-muted">consectetur dui. Quisque lacinia vitae lectus placerat dictum. Integer tristique sem a risus egestas, ac accumsan ligula volutpat. Donec at convallis elit"</small>
                    </div>
                </div>

                <div class="media msg">
                    <a class="pull-left" href="#/">
                        <img class="media-object img-circle" style={{/*width: 32px; height: 32px;*/}} src="https://bootdey.com/img/Content/user_2.jpg"/>
                    </a>
                    <div class="media-body">
                        <small class="pull-right time"><i class="fa fa-clock-o"></i> 12:10am</small>
                        <h5 class="media-heading">Pauline mothg</h5>
                        <small class="col-md-10 text-muted">Cras commodo ante sit amet nulla porta, sed feugiat lectus accumsan. Maecenas luctus est sed dignissim mattis. Mauris ullamcorper hendrerit est in pharetra text-muted"</small>
                    </div>
                </div>
            </div>

            <div class="send-wrap ">
                <textarea class="form-control send-message" rows="3" placeholder="Write a reply..."></textarea>
            </div>
            <div class="btn-panel">
                <button class="btn btn-success" role="button">
                    <i class="fa fa-share"></i> Send Message
                </button>
            </div>
        </div>
    </div>
</div>                
		</div>
	);
}
export default App;

4. Now we need to add below code into our my-awesome-project/src/App.css file :


                    
.conversation-wrap{
    box-shadow: -2px 0 3px #ddd;
    padding:0;
    max-height: 400px;
    overflow: auto;
}

.conversation{
    padding:5px;
    border-bottom:1px solid #ddd;
    margin:0;

}

.message-wrap{
    box-shadow: 0 0 3px #ddd;
    padding:0;

}

.msg{
    padding:5px;
    margin:0;
}

.msg-wrap{
    padding:10px;
    max-height: 400px;
    overflow: auto;
}

.time{
    color:#bfbfbf;
}

.send-wrap{
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding:10px;
}

.send-message{
    resize: none;
}

.highlight{
    background-color: #f7f7f9;
    border: 1px solid #e1e1e8;
}

.send-message-btn{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;

    border-bottom-right-radius: 0;
}

.msg-wrap .media-heading{
    color:#003bb3;
    font-weight: 700;
}

.msg-date{
    background: none;
    text-align: center;
    color:#aaa;
    border:none;
    box-shadow: none;
    border-bottom: 1px solid #ddd;
}

Similar snippets

Find more similar snippets using the following tags:messages,chat

React js template and ui example Chat room with right list

Chat room with right list

View
React js template and ui example bs4 Message Chat Box

bs4 Message Chat Box

View
React js template and ui example Clear inbox list

Clear inbox list

View
React js template and ui example Chat Lobby

Chat Lobby

View
React js template and ui example invoice page

invoice page

View