Hooks, Context Providers, and Components that make it easy to interact with Firebase.

• Easy realtime updates for your function components - Hooks like useUserand useFirestoreCollection let 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 enablePersistence to be set before any data fetches are made. This can be tough to support in React's world of re-renders. ReactFire gives you useInitFirestore and useInitRemoteConfig hooks that guarantee they're set before anything else.

# npm
npm install --save firebase reactfire

# or

# yarn
yarn add firebase reactfire

Depending on your targeted platforms you may need to install polyfills. The most commonly needed will be globalThis and Proxy.

• Quickstart
• Common Use Cases
• API Reference
• v3 -> v4 Upgrade Guide

Check out the live version on StackBlitz!

import React from 'react';
import { render } from 'react-dom';

import { doc, getFirestore } from 'firebase/firestore';
import { FirebaseAppProvider, FirestoreProvider, useFirestoreDocData, useFirestore, useFirebaseApp } from 'reactfire';

const firebaseConfig = {
  /* Add in your config object from the Firebase console */
};

function BurritoTaste() {
  // access the Firestore library
  const burritoRef = doc(useFirestore(), 'tryreactfire', 'burrito');

  // subscribe to a document for realtime updates. just one line!
  const { status, data } = useFirestoreDocData(burritoRef);

  // check the loading status
  if (status === 'loading') {
    return <p>Fetching burrito flavor...</p>;
  }

  return <p>The burrito is {data.yummy ? 'good' : 'bad'}!</p>;
}

function App() {
  const firestoreInstance = getFirestore(useFirebaseApp());
  return (
    <FirestoreProvider sdk={firestoreInstance}>
      <h1>🌯</h1>
      <BurritoTaste />
    </FirestoreProvider>
  );
}

render(
  <FirebaseAppProvider firebaseConfig={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.

These features are marked as extra experimental because they use experimental React features that will not be stable until sometime after React 18 is released.

• Loading states handled by <Suspense> - ReactFire's hooks throw promises that Suspense can catch. Let React handle loading states for you.
• Automatically instrument your Suspense load times - Need to automatically instrument your Suspense load times with RUM? Use <SuspenseWithPerf />.

Enable concurrent mode features by following the concurrent mode setup guide and then setting the suspense prop in FirebaseAppProvider:

<FirebaseAppProvider firebaseConfig={firebaseConfig} suspense={true}>

See concurrent mode code samples in example/withSuspense