React Setup

VITE_FIREBASE_API_KEY=your-api-key
VITE_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your-project-id
VITE_FIREBASE_APP_ID=your-app-id

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
 
const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
  appId: import.meta.env.VITE_FIREBASE_APP_ID,
};
 
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

npx fireclass doctor

import "reflect-metadata";
import { createFireclass } from "@dharayush7/fireclass-react";
import { db } from "./firebase";
 
export const { BaseModel, useQuery, useDoc, adapter } = createFireclass(db);

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

import { Collection } from "@dharayush7/fireclass-react";
import { IsBoolean, IsString } from "class-validator";
import { BaseModel } from "../lib/fireclass";
 
@Collection("todos")
export class Todo extends BaseModel<Todo> {
  @IsString()
  title!: string;
 
  @IsBoolean()
  done!: boolean;
 
  constructor(data?: Partial<Todo>) {
    super(data);
    Object.assign(this, data);
  }
}

import { useQuery } from "./lib/fireclass";
import { Todo } from "./models/todo";
 
export function TodoList() {
  const { data: todos, loading, error } = useQuery(Todo, {
    orderBy: { title: "asc" },
  });
 
  if (loading) return <p>Loading...</p>;
  if (error) return <p>{error.message}</p>;
  return <ul>{todos.map((todo) => <li key={todo.id}>{todo.title}</li>)}</ul>;
}

npx fireclass doctor
npm run build