# @extrawest/firebase-chat-list-component

> React Firebase Chat List Component

Latest version **1.0.6** (published 2021-07-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install @extrawest/firebase-chat-list-component
pnpm add @extrawest/firebase-chat-list-component
yarn add @extrawest/firebase-chat-list-component
bun add @extrawest/firebase-chat-list-component
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2021-07-21 |
| First published | 2021-07-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 10 |
| Unpacked size | 38 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Extrawest |
| Maintainers | dmytro_podolianskyi |
| Keywords | chat wrapper, chat, firebase chat, firebase, Extrawest |

## Links

- npm: https://www.npmjs.com/package/@extrawest/firebase-chat-list-component
- Repository: https://github.com/extrawest/firebase-chat-list-component
- Homepage: https://github.com/extrawest/firebase-chat-list-component#readme
- Issues: https://github.com/extrawest/firebase-chat-list-component/issues
- npm.io page: https://npm.io/package/@extrawest/firebase-chat-list-component

## Dependencies (10)

- [dayjs](https://npm.io/package/dayjs.md) ^1.10.4
- [final-form](https://npm.io/package/final-form.md) ^4.20.2
- [react-scroll](https://npm.io/package/react-scroll.md) ^1.8.2
- [@material-ui/lab](https://npm.io/package/@material-ui/lab.md) ^4.0.0-alpha.58
- [ios-inner-height](https://npm.io/package/ios-inner-height.md) ^1.1.1
- [react-final-form](https://npm.io/package/react-final-form.md) ^6.5.3
- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^4.11.4
- [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) ^4.11.2
- [react-device-detect](https://npm.io/package/react-device-detect.md) ^1.17.0
- [react-final-form-hooks](https://npm.io/package/react-final-form-hooks.md) ^2.0.2

## Recent versions

- 1.0.6 (latest) — 2021-07-21
- 1.0.5 — 2021-07-21
- 1.0.4 — 2021-07-21
- 1.0.3 — 2021-07-21
- 1.0.1 — 2021-07-21
- 1.0.0 — 2021-07-21

## README

![Maintaner](https://img.shields.io/badge/maintainer-extrawest.com-blue)
[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/extrawest/firebase-chat-list-component/graphs/commit-activity)
![GitHub release](https://img.shields.io/github/v/release/extrawest/firebase-chat-list-component)
[![GitHub tag](https://img.shields.io/github/v/tag/extrawest/firebase-chat-list-component)](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";

<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](/LICENSE)

---
Created by Extrawest React.js Team
[Extrawest.com](https://www.extrawest.com), 2021
---

---
_Source: https://npm.io/package/@extrawest/firebase-chat-list-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._