{"library":"rxfire","title":"RxFire","description":"RxFire is an open-source JavaScript library that provides RxJS observable bindings for various Firebase web client SDKs, including Firestore, Realtime Database, Cloud Storage, Authentication, and Functions. Currently at version 6.1.0, it targets Firebase JS SDK v9+ modular APIs and is compatible with RxJS v6 and v7. The library offers observable creators that simplify asynchronous data streams from Firebase, making it portable across frameworks and tree-shakeable. Key differentiators include the ability to easily combine multiple Firebase data sources using RxJS operators and simplify code-splitting of Firebase features, acting as a complementary tool rather than a full wrapper for the Firebase SDK. It is under active maintenance by the Firebase Extended team.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install rxfire"],"cli":null},"imports":["import { collectionData } from 'rxfire/firestore';","import { getDownloadURL } from 'rxfire/storage';","import { initializeApp } from 'firebase/app';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { initializeApp } from 'firebase/app';\nimport { getFirestore, collection, where, query } from 'firebase/firestore';\nimport { collectionData } from 'rxfire/firestore';\nimport { tap } from 'rxjs/operators';\n\n// Replace with your actual Firebase configuration from the Firebase console.\n// Using process.env for security in a real application.\nconst firebaseConfig = {\n  apiKey: process.env.FIREBASE_API_KEY ?? 'YOUR_API_KEY',\n  authDomain: process.env.FIREBASE_AUTH_DOMAIN ?? 'your-project-id.firebaseapp.com',\n  projectId: process.env.FIREBASE_PROJECT_ID ?? 'your-project-id',\n  storageBucket: process.env.FIREBASE_STORAGE_BUCKET ?? 'your-project-id.appspot.com',\n  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID ?? '1234567890',\n  appId: process.env.FIREBASE_APP_ID ?? '1:1234567890:web:abcdef1234567890'\n};\n\nconst app = initializeApp(firebaseConfig);\nconst firestore = getFirestore(app);\n\n// Create a query reference to a 'cities' collection, filtering by 'state' == 'CO'\nconst citiesRef = query(\n    collection(firestore, 'cities'),\n    where('state', '==', 'CO')\n);\n\nconsole.log('Subscribing to real-time city data from Firestore...');\n\n// Use collectionData from RxFire to get an observable of the query snapshot data\ncollectionData(citiesRef, { idField: 'id' })\n  .pipe(\n    tap(cities => console.log(`Received update with ${cities.length} cities.`))\n  )\n  .subscribe({\n    next: cities => {\n      // This callback will fire initially and then on every subsequent change\n      console.log('Current cities from Colorado:', cities);\n      // In a real application, you would update your UI here.\n    },\n    error: err => console.error('Error fetching cities:', err),\n    complete: () => console.log('Observable completed (unlikely for real-time data).')\n  });\n\n// To demonstrate unsubscribe, in a real app you might do this on component unmount\n// const subscription = collectionData(...).subscribe(...);\n// setTimeout(() => subscription.unsubscribe(), 30000);","lang":"typescript","description":"This quickstart demonstrates how to initialize Firebase, obtain a Firestore instance, create a collection query, and subscribe to real-time data changes using RxFire's `collectionData` function. It includes an example of logging data updates.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}