Hooks, Context Providers, and Components that make it easy to interact with Firebase.
- Easy realtime updates for your function components - Hooks
like
useUseranduseFirestoreCollectionlet you easily subscribe to auth state, realtime data, and all other Firebase SDK events. Plus, they automatically unsubscribe when your component unmounts. - Access Firebase libraries from any component - Need the Firestore SDK?
useFirestore. Remote Config?useRemoteConfig. - Safely configure Firebase libraries - Libraries like Firestore and Remote Config require settings like
enablePersistenceto be set before any data fetches are made. This can be tough to support in React's world of re-renders. ReactFire gives youuseInitFirestoreanduseInitRemoteConfighooks that guarantee they're set before anything else. - Optional
<Suspense>support - Hand loading states to React instead of checking a status yourself. Off by default, opt in with thesuspenseprop. See Suspense below.
ReactFire is designed for web React apps and wraps the Firebase Web SDK. It is not compatible with React Native or Expo. For React Native projects, use react-native-firebase instead.
# npm
npm install --save firebase reactfire
# or# yarn
yarn add firebase reactfireDepending on your targeted platforms you may need to install polyfills. The most commonly needed will be globalThis and Proxy.
Check out the live version on StackBlitz!
importReactfrom'react';import{render}from'react-dom';import{doc,getFirestore}from'firebase/firestore';import{FirebaseAppProvider,FirestoreProvider,useFirestoreDocData,useFirestore,useFirebaseApp}from'reactfire';constfirebaseConfig={/* Add in your config object from the Firebase console */};functionBurritoTaste(){// access the Firestore libraryconstburritoRef=doc(useFirestore(),'tryreactfire','burrito');// subscribe to a document for realtime updates. just one line!const{ status, data }=useFirestoreDocData(burritoRef);// check the loading statusif(status==='loading'){return<p>Fetching burrito flavor...</p>;}return<p>The burrito is {data.yummy ? 'good' : 'bad'}!</p>;}functionApp(){constfirestoreInstance=getFirestore(useFirebaseApp());return(<FirestoreProvidersdk={firestoreInstance}><h1>🌯</h1><BurritoTaste/></FirestoreProvider>);}render(<FirebaseAppProviderfirebaseConfig={firebaseConfig}><App/></FirebaseAppProvider>,document.getElementById('root'));
This repository is maintained by Googlers but is not a supported Firebase product. Issues here are answered by maintainers and other community members on GitHub on a best-effort basis.
ReactFire's hooks can throw promises for <Suspense> to catch, so React handles loading states for you instead of you checking status on each result.
This is off by default. Opt in with the suspense prop on FirebaseAppProvider:
<FirebaseAppProviderfirebaseConfig={firebaseConfig}suspense={true}><SuspenseWithPerf /> does the same and also measures how long the fallback was shown, using the browser's User Timing API.
See example/withSuspense for full samples.