{"library":"react-firebase-hooks","title":"React Firebase Hooks","description":"React Firebase Hooks is a comprehensive library providing a collection of reusable React Hooks specifically designed for integrating with Firebase services. It aims to simplify common data fetching and state management patterns when building React applications that leverage Firebase's authentication, Firestore, Realtime Database, Cloud Functions, Storage, and Messaging. The current stable version is 5.1.1, which requires Firebase v9 (modular SDK) or higher and React 16.8.0 or later. The library maintains an active release cadence, frequently addressing bugs and introducing new features, with major version bumps typically aligning with significant Firebase SDK changes. Its primary differentiator is the idiomatic React Hooks interface, making Firebase integration more straightforward and aligned with modern React development practices compared to imperative SDK calls.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-firebase-hooks"],"cli":null},"imports":["import { useAuthState } from 'react-firebase-hooks/auth';","import { useCollectionData } from 'react-firebase-hooks/firestore';","import { useDocument } from 'react-firebase-hooks/firestore';","import { useHttpsCallable } from 'react-firebase-hooks/functions';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { initializeApp } from 'firebase/app';\nimport { getAuth, GoogleAuthProvider, signInWithPopup, signOut } from 'firebase/auth';\nimport { useAuthState } from 'react-firebase-hooks/auth';\n\n// Your web app's Firebase configuration\n// For Firebase JS SDK v7.20.0 and later, measurementId is optional\nconst firebaseConfig = {\n  apiKey: process.env.FIREBASE_API_KEY ?? 'YOUR_API_KEY',\n  authDomain: process.env.FIREBASE_AUTH_DOMAIN ?? 'YOUR_AUTH_DOMAIN',\n  projectId: process.env.FIREBASE_PROJECT_ID ?? 'YOUR_PROJECT_ID',\n  storageBucket: process.env.FIREBASE_STORAGE_BUCKET ?? 'YOUR_STORAGE_BUCKET',\n  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID ?? 'YOUR_MESSAGING_SENDER_ID',\n  appId: process.env.FIREBASE_APP_ID ?? 'YOUR_APP_ID'\n};\n\n// Initialize Firebase\nconst app = initializeApp(firebaseConfig);\nconst auth = getAuth(app);\nconst googleProvider = new GoogleAuthProvider();\n\nfunction AuthStatus() {\n  const [user, loading, error] = useAuthState(auth);\n\n  if (loading) {\n    return (\n      <div>\n        <p>Initialising User...</p>\n      </div>\n    );\n  }\n  if (error) {\n    return (\n      <div>\n        <p>Error: {error.message}</p>\n      </div>\n    );\n  }\n  if (user) {\n    return (\n      <div>\n        <p>Current User: {user.displayName || user.email}</p>\n        <button onClick={() => signOut(auth)}>Sign Out</button>\n      </div>\n    );\n  }\n  return (\n    <div>\n      <p>Not signed in</p>\n      <button onClick={() => signInWithPopup(auth, googleProvider)}>Sign In with Google</button>\n    </div>\n  );\n}\n\n// To run this, render AuthStatus in your main App component:\n// export default function App() {\n//   return <AuthStatus />;\n// }\n","lang":"typescript","description":"Demonstrates basic Firebase initialization using the modular SDK and utilizes `useAuthState` to display the current user's authentication status, including loading and error states. It also includes simple sign-in/sign-out functionality with Google Provider.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}