@rithikachowta08/react-chat

React Chat

One to one chat component built using Firebase's realtime database. This component can be used to intialize a chat window for a user who is logged in to your application, with another user of your application. The messages are stored and read from Firebase RTDB. A firebase config must be passed for the component to work.

Requirements

A login and signup flow must already be implemented in your application. This component must be rendered only on pages where your user has already logged in. It is assumed that information regarding the sender and receiver of the messages is already known at the time of invoking this component.

Installation

npm i @rithikachowta08/react-chat

Usage

• Create an app on firebase and copy the configuration object to be passed as props to the chat component.

<Chat
  config={{
    apiKey: "...",
    authDomain: "...",
    databaseURL: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "...",
    appId: "...",
  }}
  currentUser={{
    name: "Harry",
    id: "129091",
    imageUrl:
      "https://upload.wikimedia.org/wikipedia/en/d/d7/Harry_Potter_character_poster.jpg",
  }}
  receiver={{
    name: "Ron",
    id: "129090",
    imageUrl:
      "https://static.wikia.nocookie.net/the-truth-behind-aurora/images/8/85/Ron_Weasley.jpg",
  }}
  themeColor="#3C5A99"
  textColor="#fff"
  messageBubbleClass=""
  containerClass=""
  inputClass=""
/>

Props

Name	Value	Description
config	object	Firebase configuration info of your Firebase App. Required to access Firebase Realtime database.
receiver	object	An object containing name (string), id (string) and imageUrl(string) . This contains the information of the intended recipient of messages in the chatroom. imageUrl will be used as avatar of the recipient.
currentUser	object	An object containing name (string), id (string) and imageUrl(string) . This contains the information of the current logged-in user who is initiating the chat. imageUrl will be used as avatar of the user.
themeColor	string	Color code that will be used as the primary color for the chat component
textColor	string	Color code that will be used for the text in the message bubbles
sendIcon	string	Image URL that will be used as the send icon in the input field
loader	string	Image URL that will be used as the loader while messages are being fetched from firebase
containerClass	string	className for chat container
inputClass	string	className for the message input element
messageBubbleClass	string	className for the message bubble component
darkMode	boolean	Boolean value to enable/disable dark mode

Links and examples

• Full example on Github: Example.

• CodeSandbox: CodeSandbox.

• Demo: Demo.

• Tutorial on how this package was implemented: Medium article.

License

react-chat is released under MIT License.