Home

Awesome

ReactFire

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

What is ReactFire?

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.

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