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>
  )
}