React Firestore Listener

Description

A simple React hook for listening to Firestore documents.

Installation

• If it's not installed already, install Firebase (modular, v9).
• Then run npm i --save react-firestore-listener

Configuration

Props

| Prop | Type | Description | Required | | ----------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | -------- | | collection | string | Name of the collection to listen to (if specified in options) | Yes | | dataMapping | (data: Doc) => Doc or (data: Doc) => Promise | Map the data from each document with your own function. Document id (as docId), metadata, and ref are included by default in data. | No | | refresh | any[] | List of variables that if one or more are changed would force the listener to look again at Firestore | No | | options | See below | Object of options that help with the Firestore query | No |

Options

| Key | Type | Description | Required | | ------------- | ----------- | -------------------------------------------------------------- | -------- | | conditions | Condition[] | An array of condition objects that specify the Firestore query | Yes | | orderBy | OrderBy[] | An array of order-by "clauses" that order the query | No | | limit | number | Limit the size of the documents returned by the query | No | | enableLogging | boolean | Should log package errors or warnings | No |

Condition

| Index | Name | Type | Description | Required | | ----- | -------- | ------------------ | -------------------------------------------- | -------- | | 0 | field | Firestore field | The field that you are querying on | Yes | | 1 | operator | Firestore operator | The operator acts on the field and value | Yes | | 2 | value | any | The value that you are looking to query with | Yes |

OrderBy

| Key | Type | Description | Required | | ----- | --------------- | --------------------------------------- | -------- | | field | Firestore field | The field that you are ordering by | Yes | | desc | boolean | Whether to sort ascending or descending | Yes |

Usage

import React from "react"
import useFirestoreListener from "react-firestore-listener"
import { getApp, initializeApp } from "firebase/app"

const config = {
  // insert your Firebase config here
}

/*
We need to make sure that Firebase is initialized before we can listen to documents.
*/
if (!getApp()) {
  initializeApp(config)
}

interface Hobby {
  name: string
}

const App = () => {
  const hobbies = useFirestoreListener<Hobby>({ collection: "hobbies" })
  return (
    <div>
      <h1>Welcome to my app</h1>
      <br />
      <div>My Hobbies</div>
      <ul>
        {hobbies.map((hobby) => {
          return <li>{hobby.name}</li>
        })}
      </ul>
    </div>
  )
}