@codefire/firebase-react

Plug-and-play Firebase utilities for Firestore and Storage in React and other frontend projects.

Installation

npm install @codefire/firebase-react firebase

firebase is a peer dependency; your project controls the version.

Setup

Initialize Firebase once (e.g. in your app entry or root layout):

import { initFirebase } from "@codefire/firebase-react";

initFirebase({
  apiKey: "your-api-key",
  authDomain: "your-project.firebaseapp.com",
  projectId: "your-project-id",
  storageBucket: "your-project.appspot.com",
  messagingSenderId: "...",
  appId: "...",
});

Firestore

Import from the main package or the firestore subpath:

import {
  addDocument,
  getDocument,
  setDocument,
  updateDocument,
  deleteDocument,
  queryCollection,
  getDb,
  serverTimestamp,
  where,
  orderBy,
  limit,
} from "@codefire/firebase-react/firestore";

API

| Function | Description | |----------|-------------| | getDb() | Returns the Firestore instance (call after initFirebase). | | addDocument(collectionName, data) | Creates a document with auto-generated ID. Adds createdAt. Returns document ID. | | setDocument(collectionName, docId, data) | Creates or overwrites a document with the given ID. Sets updatedAt. | | updateDocument(collectionName, docId, data) | Updates existing document fields. Sets updatedAt. | | deleteDocument(collectionName, docId) | Deletes a document. | | getDocument(collectionName, docId) | Fetches a document by ID. Returns null if not found. Result includes id. | | queryCollection(collectionName, constraints?) | Fetches documents with optional where, orderBy, limit. Results include id. |

Helpers serverTimestamp, where, orderBy, limit are re-exported from Firebase for building queries.

Example

const id = await addDocument("waitlist", { email: "[email protected]", city: "Santiago" });

const items = await queryCollection("services", [
  where("active", "==", true),
  orderBy("order", "asc"),
  limit(10),
]);

Storage

import { uploadFile, deleteFile, getFileUrl } from "@codefire/firebase-react/storage";

API

| Function | Description | |----------|-------------| | uploadFile(file, options?) | Uploads a file. Options: folder, fileName, onProgress(percent). Returns { url, path }. | | deleteFile(path) | Deletes a file by path. | | getFileUrl(path) | Returns the public download URL for a path. |

Example

const { url, path } = await uploadFile(file, {
  folder: "profiles",
  onProgress: (p) => console.log(`${p}%`),
});

Subpath imports

To avoid pulling in unused code:

• @codefire/firebase-react — core + firestore + storage
• @codefire/firebase-react/firestore — Firestore only
• @codefire/firebase-react/storage — Storage only

You still need to call initFirebase() from the main package once before using Firestore or Storage.

License

MIT