@extrawest/firebase-chat-list-component
v1.0.6
Published
React Firebase Chat List Component
Downloads
15
Readme
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
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()"
}
}
}
}
License
- See LICENSE