ReactFire

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

Github stars Tracking Chart

ReactFire

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

What is ReactFire?

  • 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.

Install

# 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.

Docs

Example use

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')
);

Status

Status: Experimental

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.

Extra Experimental concurrent mode features

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

Main metrics

Overview
Name With OwnerFirebaseExtended/reactfire
Primary LanguageTypeScript
Program languageJavaScript (Language Count: 5)
Platform
License:MIT License
所有者活动
Created At2014-04-28 16:27:17
Pushed At2025-07-21 23:09:30
Last Commit At
Release Count42
Last Release Namev4.2.3 (Posted on )
First Release Namev0.1.0 (Posted on )
用户参与
Stargazers Count3.6k
Watchers Count97
Fork Count408
Commits Count563
Has Issues Enabled
Issues Count246
Issue Open Count55
Pull Requests Count197
Pull Requests Open Count34
Pull Requests Close Count85
项目设置
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private