use-on-snapshot

use-on-snapshot

use-on-snapshot is custom hooks for onSnapshot of Firestore Database in Firebase.

Features

• TypeScript support

Installation

npm i --save use-on-snapshot

Usage

Firestore Example

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  appId: process.env.FIREBASE_APP_ID,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export default db;

Get Document Example

import { DocumentReference, doc } from "firebase/firestore";
import db from "libs/db";

const { data, loading, error } = useOnSnapshot<DocumentReference, Hoge>({
  firestore: db,
  paths: ["hoges", "hogeId"],
  type: "reference",
});

Get Collection Example

import { CollectionReference, collection } from "firebase/firestore";
import db from "libs/db";

const { data, loading, error } = useOnSnapshot<CollectionReference, Fuga>(
  {
    firestore: db,
    paths: ["hoges", "hogeId", "fugas],
    type: "query",
  },
);