Customize ListView as Chat Window in React ListView component

24 Jun 2022 / 3 minutes to read

ListView can be customizable as chat window. To achieve that, use ListView template property and Avatar component.

* Listview template property is used to showcase the ListView as chat window.
* Avatar component is used to design the image of contact person.

Refer the below template code snippet for Template of chat window.

public listTemplate(data: any): JSX.Element {
        let sendertemplate = <div className='settings'><div id="content"><div className="name">{data.text}</div><div id="info">{data.contact}</div></div>{
                    data.avatar !== "" ?
                        <div id="image"><span className='e-avatar img1 e-avatar-circle'>{data.avatar}</span></div> : <div id="image"><span className={`${data.pic} img1 e-avatar e-avatar-circle`}></span></div>
                }</div>
        let receivertemplate = <div className='settings'>{
                    data.avatar !== "" ?
                        <div id="image2"><span className='e-avatar img2 e-avatar-circle'>{data.avatar}</span></div> : <div id="image2"><span className={`${data.pic} img2 e-avatar e-avatar-circle`}></span></div>
                }<div id="content1"><div className="name1">{data.text}</div><div id="info1">{data.contact}</div></div></div>


        return (
            <div>
                {data.chat !== "receiver" ? (sendertemplate) : (receivertemplate)}
            </div>
        );
    }

listTemplate(data, any);
JSX.Element;
{
    let sendertemplate = <div className='settings'><div id="content"><div className="name">{data.text}</div><div id="info">{data.contact}</div></div>{data.avatar !== "" ?
        <div id="image"><span className='e-avatar img1 e-avatar-circle'>{data.avatar}</span></div> : <div id="image"><span className={`${data.pic} img1 e-avatar e-avatar-circle`}></span></div>}</div>;
    let receivertemplate = <div className='settings'>{data.avatar !== "" ?
        <div id="image2"><span className='e-avatar img2 e-avatar-circle'>{data.avatar}</span></div> : <div id="image2"><span className={`${data.pic} img2 e-avatar e-avatar-circle`}></span></div>}<div id="content1"><div className="name1">{data.text}</div><div id="info1">{data.contact}</div></div></div>;
    return (<div>
                {data.chat !== "receiver" ? (sendertemplate) : (receivertemplate)}
            </div>);
}

Chat order in template

In ListView template, we have rendered the list items based on receiver and sender information from dataSource of listview.

Adding messages to chat window

* Use textbox to get message from user.
* Add the textbox message to ListView dataSource using [addItem](../../api/list-view/#additem) method.

btnClick() {
    let value = this.textboxEle.value;
    this.listObj.addItem([{ text: "Amenda", contact: value, id: "2", avatar: "A", pic: "", chat: "receiver" }]);
    this.textboxEle.value ="";
}

btnClick();
{
    let value = this.textboxEle.value;
    this.listObj.addItem([{ text: "Amenda", contact: value, id: "2", avatar: "A", pic: "", chat: "receiver" }]);
    this.textboxEle.value = "";
}

Source

Preview

App.jsx

index.jsx

index.html

index.css

App.tsx

index.tsx

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.listObj = null;
        //Define an array of JSON data
        this.data = [
            {
                text: "Jenifer",
                contact: "Hi",
                id: "1",
                avatar: "",
                pic: "pic01",
                chat: "sender"
            },
            { text: "Amenda", contact: "Hello", id: "2", avatar: "A", pic: "", chat: "receiver" },
            {
                text: "Jenifer",
                contact: "What Knid of application going to launch",
                id: "4",
                avatar: "",
                pic: "pic01",
                chat: "sender"
            },
            {
                text: "Amenda ",
                contact: "A knid of Emergency broadcast App",
                id: "5",
                avatar: "A",
                pic: "",
                chat: "receiver"
            },
            {
                text: "Jacob",
                contact: "Can you please elaborate",
                id: "6",
                avatar: "",
                pic: "pic04",
                chat: "sender"
            }
        ];
    }
    listTemplate(data) {
        const sendertemplate = (<div className="settings">
        <div id="content">
          <div className="name">{data.text}</div>
          <div id="info">{data.contact}</div>
        </div>
        {data.avatar !== "" ? (<div id="image">
            <span className="e-avatar img1 e-avatar-circle">{data.avatar}</span>
          </div>) : (<div id="image">
            <span className={`${data.pic} img1 e-avatar e-avatar-circle`}/>
          </div>)}
      </div>);
        const receivertemplate = (<div className="settings">
        {data.avatar !== "" ? (<div id="image2">
            <span className="e-avatar img2 e-avatar-circle">{data.avatar}</span>
          </div>) : (<div id="image2">
            <span className={`${data.pic} img2 e-avatar e-avatar-circle`}/>
          </div>)}
        <div id="content1">
          <div className="name1">{data.text}</div>
          <div id="info1">{data.contact}</div>
        </div>
      </div>);
        return <div>{data.chat !== "receiver" ? sendertemplate : receivertemplate}</div>;
    }
    btnClick() {
        const value = this.textboxEle.value;
        this.listObj.addItem([
            { text: "Amenda", contact: value, id: "2", avatar: "A", pic: "", chat: "receiver" }
        ]);
        this.textboxEle.value = "";
    }
    render() {
        return (<div>
        
        <ListViewComponent id="List" dataSource={this.data} headerTitle="Chat" showHeader={true} template={this.listTemplate} ref={scope => {
            this.listObj = scope;
        }}/>

        <input id="inputname" className="e-input" ref={textbox => {
            this.textboxEle = textbox;
        }} type="text" placeholder="Type your message"/>

        <ButtonComponent id="btn" onClick={this.btnClick.bind(this)}>
          Send
        </ButtonComponent>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ListView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
    <div id='element' style="margin:0 auto; max-width:400px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

#List {
  margin: 0 auto;
  border: 1px solid #ccc;
}

#List .e-list-item {
  height: auto;
  cursor: pointer;
}

#List .e-list-header .e-text {
  font-family: sans-serif;
  font-size: 18px;
  line-height: 26px;
}

#List #info,
#List .name {
  font-size: 11px;
  line-height: 20px;
}

#List .name {
  padding-top: 3px;
  font-weight: 500;
  padding-left:150px;
  margin-left: 55px;
}
#List #info {
  float: right;
  margin-right:10px;
}
.pic01 {
  background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/1.png");
}

.pic02 {
  background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/3.png");
}

.pic03 {
  background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/5.png");
}

.pic04 {
  background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/2.png");
}

.img2 {
  margin-left: 10px;
  margin-top: 7px;
  font-size: 13px;
}

#List #content1 {
  width: 200px;
  background-color: aliceblue;
  display: inline-block;
  margin: 5px;
  
}

#List #info1,
#List .name1 {
  font-size: 11px;
  line-height: 20px;
  margin-left: 10px;
}

#List .name1 {
  padding-top: 3px;
  font-weight: 500;
}
#List #content {
    margin: 5px;
    width: 250px;
    margin-left: 62px;
    background-color: aliceblue;
    display:inline-block
}
#image {
    float: right;
    /* display: inline-block; */

}
#image2 {
    float: left;
    /* display: inline-block; */

}
.img1 {
    margin-right: 10px;
    margin: 5px;
    font-size: 13px;
}
.e-listview .e-list-header{
  color: white;
}
.e-listview .e-list-header{
  background: rgb(2, 120, 215);
}
#List.e-listview .e-hover {
  background-color: transparent;
}
#inputname {
  width: 275px
}
.message {
  width: 350px;
  margin: 0 auto;
}
#btn {
  float:right
}

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

export default class App extends React.Component<{}, {}> {
  listObj: ListViewComponent = null as any;
  textboxEle: any;
  //Define an array of JSON data
  data: { [key: string]: Object }[] = [
    {
      text: "Jenifer",
      contact: "Hi",
      id: "1",
      avatar: "",
      pic: "pic01",
      chat: "sender"
    },
    { text: "Amenda", contact: "Hello", id: "2", avatar: "A", pic: "", chat: "receiver" },
    {
      text: "Jenifer",
      contact: "What Knid of application going to launch",
      id: "4",
      avatar: "",
      pic: "pic01",
      chat: "sender"
    },
    {
      text: "Amenda ",
      contact: "A knid of Emergency broadcast App",
      id: "5",
      avatar: "A",
      pic: "",
      chat: "receiver"
    },
    {
      text: "Jacob",
      contact: "Can you please elaborate",
      id: "6",
      avatar: "",
      pic: "pic04",
      chat: "sender"
    }
  ];

  listTemplate(data: any): JSX.Element {
    const sendertemplate = (
      <div className="settings">
        <div id="content">
          <div className="name">{data.text}</div>
          <div id="info">{data.contact}</div>
        </div>
        {data.avatar !== "" ? (
          <div id="image">
            <span className="e-avatar img1 e-avatar-circle">{data.avatar}</span>
          </div>
        ) : (
          <div id="image">
            <span className={`${data.pic} img1 e-avatar e-avatar-circle`} />
          </div>
        )}
      </div>
    );

    const receivertemplate = (
      <div className="settings">
        {data.avatar !== "" ? (
          <div id="image2">
            <span className="e-avatar img2 e-avatar-circle">{data.avatar}</span>
          </div>
        ) : (
          <div id="image2">
            <span className={`${data.pic} img2 e-avatar e-avatar-circle`} />
          </div>
        )}
        <div id="content1">
          <div className="name1">{data.text}</div>
          <div id="info1">{data.contact}</div>
        </div>
      </div>
    );

    return <div>{data.chat !== "receiver" ? sendertemplate : receivertemplate}</div>;
  }

  btnClick() {
    const value = this.textboxEle.value;
    this.listObj.addItem([
      { text: "Amenda", contact: value, id: "2", avatar: "A", pic: "", chat: "receiver" }
    ]);
    this.textboxEle.value = "";
  }

  render() {
    return (
      <div>
        {/* ListView element */}
        <ListViewComponent
          id="List"
          dataSource={this.data}
          headerTitle="Chat"
          showHeader={true}
          template={this.listTemplate as any}
          ref={scope => {
            this.listObj = scope as any;
          }}
        />

        <input
          id="inputname"
          className="e-input"
          ref={textbox => {
            this.textboxEle = textbox;
          }}
          type="text"
          placeholder="Type your message"
        />

        <ButtonComponent id="btn" onClick={this.btnClick.bind(this)}>
          Send
        </ButtonComponent>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('element'));

Contents

Chat order in template
Adding messages to chat window

Contents

Chat order in template
Adding messages to chat window

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!