https://github.com/extrawest/firebase-chat-list-component
Extrawest Chat Component for Firebase
https://github.com/extrawest/firebase-chat-list-component
Last synced: 9 months ago
JSON representation
Extrawest Chat Component for Firebase
- Host: GitHub
- URL: https://github.com/extrawest/firebase-chat-list-component
- Owner: extrawest
- License: other
- Created: 2021-06-27T13:48:38.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-07-21T22:39:23.000Z (almost 5 years ago)
- Last Synced: 2025-08-18T17:25:40.005Z (10 months ago)
- Language: TypeScript
- Size: 145 KB
- Stars: 10
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://github.com/extrawest/firebase-chat-list-component/graphs/commit-activity)
[](https://github.com/extrawest/firebase-chat-list-component/tags/)
# 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**.
```bash
# 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](https://npmjs.com) or [yarn](https://yarnpkg.com/) package managers with a module bundler like [Webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/) to consume [CommonJS](http://webpack.github.io/docs/commonjs.html) modules.
## Demo
[Check a simple live demo](https://extrawest-firebase-chat.web.app/)
## 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
```jsx
import ChatBox from "extrawest-firebase-chat-list-component";
```
## 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](/LICENSE)
---
Created by Extrawest React.js Team
[Extrawest.com](https://www.extrawest.com), 2021
---