@extrawest/firebase-chat-list-component NPM

GitHub release

Extrawest Firebase Chat List Component

Extrawest Chat List Component for Firebase

Installation

Extrawest Firebase Chat List Component requires React 16.8.0 or later and Firebase v8.0.0 or later.

# with npm
npm install --save extrawest-firebase-chat-list-component

# with yarn
yarn add extrawest-firebase-chat-list-component

This assumes that you’re using the npm or yarn package managers with a module bundler like Webpack or Browserify to consume CommonJS modules.

Demo

Check a simple live demo

Available settings

Prop	Type	Description
chatMessagePlaceholder	string	Placeholder message for input field
loading	boolean	status if list of messages loading or not
messages	func	list of available message
handleSubmitMessage	func	callback to handle submit a new message
currentAuthUid	string or undefined	current user id to mark user messages

How to use

import ChatBox from "extrawest-firebase-chat-list-component";

<ChatBox
  chatMessagePlaceholder="Type a message"
  messages={snapshots}
  loading={loading}
  handleSubmitMessage={handleSubmit}
  currentAuthUid={currentUserId}
/>

Firebase Database rules

Before using chat, you need to configure firebase application and rules for Realtime Database

{
  "rules": {
    "chat": {
      ".read": "auth != null",
      ".write": "auth != null",
      "$messageId": {
       ".validate": "newData.hasChildren(['message', 'timestamp', 'author']) && newData.child('message').isString() && newData.child('author').isString() && newData.child('timestamp').isNumber()"
      }  
    }
  }
}