Extrawest Chat List Component for Firebase
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-componentThis assumes that you’re using the npm or yarn package managers with a module bundler like Webpack or Browserify to consume CommonJS modules.
| 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 |
import ChatBox from "extrawest-firebase-chat-list-component";
<ChatBox
chatMessagePlaceholder="Type a message"
messages={snapshots}
loading={loading}
handleSubmitMessage={handleSubmit}
currentAuthUid={currentUserId}
/>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()"
}
}
}
}
- See LICENSE