abc-chat v1.0.0

React Responsive Chat

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

Installation

Install react-responsive-chat with npm

  npm install react-responsive-chat

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

function App(){
     const user={
               fullName:"John Smith",
               photo:"...",
               _id:"..."
            }
     const [chats, setChats]=useState([]);
     const [isLoadingChats, setIsLoadingChats]=useState(false);
     const [chatRooms, setChatRooms]=useState([]);
     const [rooms, setRooms]=useState([]);
     const [isLoadingChatRooms, setIsLoadingChatRooms]=useState(false);
     const [selectedChatRoom, setSelectedChatRoom]=useState(null);

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

    useEffect(() => {
      if(selectedChatRoom !== null){
        setChats([
            {
            _id: 1,
            text: 'Hello developer',
            createdAt: new Date(),
            user: {
                  _id: 2,
                  name: 'React Responsive Chat',
                  avatar: 'https://...',
               },
              },
            ])
          }
    }, [selectedChatRoom])

       return(
           <ReactResponsiveChat
              chats={chats}
              chatRooms={chatRooms}
              selectedChatRoom={selectedChatRoom}
              onChatRoomSelection={(e)=>setSelectedChatRoom(e)}
              user={user}
              isLoadingChats={isLoadingChats}
              isLoadingChatRooms={isLoadingChatRooms}
              onSend={(e)=> {...}}

              <!--Required For Load More Case-->

              chatsPage={chatsPageNo}
              chatRoomsPage={roomsPageNo}
              isLoadMoreChats={Math.ceil(totalChats / pageLimit) > chatsPageNo}
              isLoadMoreChatRooms={Math.ceil(totalRooms / pageLimit) > 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);
               }}


        />
      )}

Props

• chats (Array) - Chats to display
• isTyping (Bool) - Typing Indicator state; default false
• placeholder (String) - Placeholder when text is empty; default is 'Type a message...'
• user (Object) - User sending the messages: { _id, name, avatar }
• onSend (Function) - Used when sending a message
• chatRooms (Array) - Chat Rooms to display
• colors (Object) - Colors prop use for adjust UI
• onBack (function) - OnBack required for mobile devices
• selectedChatRoom (Object) - selectedChatRoom required for open Chat Room (note: It must be null by default)
• setSelectedChatRoom (Function) - setSelectedChatRoom used for open Chat Room
• onLoadMoreChats (Function) - onLoadMoreChats work on scroll up to load chats
• roomsLoader (Function) - Custom Loader display when loading Chat Rooms
• chatsLoader (Function) - Custom Loader display when loading Chats
• scrollThreshold (Number) - Scroll Threshold value by default 0.8
• unReadChatId (String) - Must be _id of chat
• isLoadingChatRooms (Bool) - Default value is false
• isLoadingChats (Bool) - Default value is false
• totalChatsCount (Number) - It must be the total chats count of the Chat Room
• totalUnReadChatsCount (Number) - It must be the total unread chats count of the Chat Room
• isShowUnReadChatsCount (Bool) - Default value is false
• onMoveToUnreadChat (Function) - This function triggers after scroll to the unread chat

Examples

Message Object

const message={
             _id:123,
             createdAt:new Date(),
             text:'Test Message',
             user:{
                _id:34,
                avatar:'https://...',
                name:"Test User"
             }
           }

Chat Room Object

const chatRoom={
             _id:123,
             createdAt:new Date(),
             user1:{
                _id:34,
                avatar:'https://...',
                name:"Test User 1"
             },
             user2:{
                _id:35,
                avatar:'https://...',
                name:"Test User 2"
             },
             lastMessage:{
                  _id:221,
                  createdAt:new Date(),
                  text:'Test Last Message',
                  user:{
                     _id:34,
                    avatar:'https://...',
                    name:"Test User 1"
                }
             },
             unReadCount:2
           }

Colors Object

const customColors = {
    chatRoom: {
        name: '#000000',
        message: 'grey',
        time: 'black',
        box: '#ffffff',
        separator: '#ae93ff',
        hoverBg: '#af94ff3b',
        hoverText: '#fff',
        unseenBg: '#ae93ff',
        unseenText: 'white',
    },
    chatRoomSelected: {
        name: '#000000',
        message: 'grey',
        time: '#ae93ff',
        box: '#af94ff1a',
        separator: '#ae93ff',
        unseenBg: '#ae93ff',
        unseenText: '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'
    }
}

Contributing

Contributions are always welcome!

See contributing.md for ways to get started.

Please adhere to this project's code of conduct.