React Responsive Chat

React Responsive Chat provides a great and customizable Chat UI for your React Web App

Install

  npm install react-responsive-chat

or

  yarn add react-responsive-chat

Usage

import React,{useState, useEffect} from 'react';
import ReactResponsiveChat from 'react-responsive-chat';

function App(){
     const user={
        _id: '...',
        createdAt: ...,
        fullName: 'Test',
        photo: 'https://...',
        lastActive: '...',
        isOnline: false,
      }

    <!-- For Chat Rooms -->

    const [isLoadingChatRooms, setIsLoadingChatRooms]=useState(false);
    const [chatRooms, setChatRooms]=useState([]);
    const [selectedChatRoom, setSelectedChatRoom]=useState(null);

     <!-- For Chats -->
     const [chats, setChats]=useState([]);
     const [isLoadingChats, setIsLoadingChats]=useState(false);

     <!--Required For Load More Case-->
      const [totalRooms, setTotalRooms] = useState(0);
      const [roomsPageNo, setRoomsPageNo] = useState(0);
      const [totalChats, setTotalChats] = useState(0);
      const [chatsPageNo, setChatsPageNo] = useState(0);
      const recordsLimit = 10;

    useEffect(() => {
      if(selectedChatRoom !== null){
        setChats([
            {
            _id: 1,
            text: 'Hello developer',
            createdAt: new Date(),
            user: {
                  _id: 2,
                  fullName: 'React Responsive Chat',
                  photo: 'https://...',
               },
               isSeen:false,
               room:"..." // must be room id
              },
            ])
          }
    }, [selectedChatRoom])

       return(
           <ReactResponsiveChat
              isLoadingChatRooms={isLoadingChatRooms}
              chatRooms={chatRooms}
              isLoadingChats={isLoadingChats}
              chats={chats}
              selectedChatRoom={selectedChatRoom}
              onChatRoomSelection={(e) => {
                 setPageNo(1);
                 setRoomData(e);
                 setIsShowingUnRead(true);
                 setMessages([]);
                }}
              user={user}
              onSend={(e)=> {...}}

              <!--Required For Load More Case-->
              chatsLimit={recordsLimit}
              chatsPage={chatsPageNo}
              isLoadMoreChats={Math.ceil(totalChats / recordsLimit) > chatsPageNo}
              isLoadMoreChatRooms={Math.ceil(totalRooms / recordsLimit) > roomsPageNo}
              onLoadMoreChats={async (e) => {
                 const pg = pageNo + 1;
                 await chatsApiCall(pg); // Note: Page must be updated after Api call
                 setPageNo(pg);
                }}
              onLoadMoreChatRooms={async () => {
                  const pg = pageNo + 1;
                  await chatRoomsApiCall(pg); // Note: Page must be updated after Api call
                  setRoomsPageNo(pg);
               }}
        />
      )}

Codesandbox Demo

Demo

Props

Name	Type	Description	Default
chatRooms	Array	Used for Chat Rooms Display	[]
onLoadMoreChatRooms	Promise	Must be promise function	undefined
renderChatRoomsLoader	Function	Must be React Component	default
selectedChatRoom	Object	Will be Selected Chat Room Object	undefined
onChatRoomSelection	Function	Will be Call on Selection of Chat Room	undefined
isLoadingChatRooms	Boolean	Must be Boolean value	false
isLoadMoreChatRooms	Boolean	Must be Boolean value	false
renderRoomsHeader	Function	Must be React Component	default
chats	Array	Used for Chats Display	[]
onLoadMoreChats	Promise	Must be promise function	undefined
renderChatsLoader	Function	Must be React Component	default
isLoadingChats	Boolean	Must be Boolean value	false
isLoadMoreChats	Boolean	Must be Boolean value	false
renderChatsHeader	Function	Must be React Component	default
onSend	Function	Must be promise function	undefined
onMoveToUnreadChat	Function	Must be function	undefined
containerClassName	String	Must be class	undefined
isShowUnReadChatsCount	Boolean	Must be Boolean value	false
totalUnReadChatsCount	Number	Must be Number	0
user	Object	Must be Object with keys (Mentioned Below)	undefined
onBack	Function	Must be Function	default
isTyping	Boolean	Must be Boolean value	false
placeholder	String	Placeholder is for Chat Input	Enter message here...
unReadChatId	String	Must be the UnRead Chat Id of Chat Room	undefined
renderChatTimeSeparator	Function	Must be React Component	default
chatsLimit	Number	Must be Number	10
chatsPage	Number	Must be Number	undefined
onTyping	Function	Must be Function	undefined
colors	Object	Must be Object with keys (Mentioned Below)	undefined
ref	Object	Must be React Ref Object	null

Object Structure Examples

User Object

const userObject={
_id: '...',
createdAt: '...',
fullName: 'Test',
photo: 'https://...',
lastActive: '...',
isOnline: false,
}

Message Object

const message={
_id:'...',
createdAt:new Date(),
text:'Test Message',
isSeen:false,
room:'...',
user:{
  _id: '...',
  createdAt: '...',
  fullName: 'Test User',
  photo: 'https://...',
  lastActive: '...', // Optional
  isOnline: false, // Optional
},
}

Chat Room Object

const chatRoom={
_id:'...',
createdAt:new Date(),
isSeen:false,
room:'...',
unReadCount:2,
sender:{
  _id:'...',
  photo:'https://...',
  fullName:'Test User 1'
},
receiver:{
  _id:'...',
  photo:'https://...',
  fullName:"Test User 2",
  lastActive: '...',
  isOnline: false,
},
lastMessage:{
  _id:'...',
  createdAt:new Date(),
  text:'Test Last Message',
  user:{
   _id:'...',
   photo:'https://...',
   fullName:'Test User 1'
   lastActive: '...',
   isOnline: false,
},
}

Colors Object

const customColors = {
chatRoom: {
  name: "#000000",
  message: "grey",
  time: "black",
  bg: "#ffffff",
  separator: "#ae93ff",
  hoverBg: "#af94ff3b",
  unReadCountBg: "#ae93ff",
  unReadCount: "white",
},
chatRoomSelected: {
  name: "#000000",
  message: "grey",
  time: "#ae93ff",
  bg: "#af94ff1a",
  separator: "#ae93ff",
  unReadCountBg: "#ae93ff",
  unReadCount: "white",
},
myMessage: {
  text: "white",
  time: "white",
  bg: "#ae93ff",
},
otherMessage: {
  text: "black",
  time: "black",
  bg: "#d8d8d8",
},
chatRoomsHeader: {
  bg: "#ae93ff",
  text: "white",
},
chatsHeader: {
  bg: "#ae93ff",
  text: "white",
},
chatsFooter: {
  bg: "#0000ff17",
  btnBg: "#ae93ff",
  btnText: "white",
  inputBg: "#fff",
  inputText: "black",
  inputScrollTrack: "#d8d8d87d",
  inputScrollBar: "#ae93ff",
},
chatsContent: {
  bg: "#fff",
  timeIndicator: "#d8d8d8",
  timeText: "black",
},
chatsScroller: {
  track: "#d8d8d87d",
  bar: "#ae93ff",
},
chatRoomsScroller: {
  track: "#d8d8d87d",
  bar: "#ae93ff",
},
noChatRoomsFound: {
  icon: "#ae93ff",
  text: "#ae93ff",
},
welcomeToChat: {
  icon: "#ae93ff",
  text: "#ae93ff",
},
};

Upcoming Features

1. Media Support
2. Search Chats or Users Support
3. Block User Chat Rooms
4. Delete Chat Rooms or Single Message