ReactFirebase

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

⚠️ Status: Experimental. The API is intended to be stable, but ReactFirebase is meant for React Concurrent Mode, which is only available in experimental React builds.

What is ReactFirebase?

• 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.
• Loading states handled by <Suspense> - ReactFirebase's hooks throw promises that Suspense can catch. No more isLoaded ?... - let React handle it for you.
• Faster initial page load times - Load only the code you need, when you need it, with useFirestore, useAuth, useRemoteConfig, and more.
• Convenient components for common use cases - Only want to render a component if a user is signed in? Wrap it in <AuthCheck />. Need to automatically instrument your Suspense load times with RUM? Use <SuspenseWithPef />.

Install

# npm
npm install --save @protrex/react-firebase firebase

# or

# yarn
yarn add @protrex/react-firebase firebase

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

Docs

• Quickstart
• Common Use Cases
• API Reference

Example use

Check out the live version on StackBlitz!

import React, { Component } from 'react';
import { createRoot } from 'react-dom';
import { FirebaseAppProvider, useFirestoreDocData, useFirestore, SuspenseWithPerf } from '@protrex/react-firebase';

const firebaseConfig = {
  /* Add your config from the Firebase Console */
};

function Burrito() {
  // lazy load the Firestore SDK
  // and create a ref
  const burritoRef = useFirestore()
    .collection('tryreactfirebase')
    .doc('burrito');

  // subscribe to the doc. just one line!
  // throws a Promise for Suspense to catch,
  // and then streams live updates
  const burrito = useFirestoreDocData(burritoRef);

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

function App() {
  return (
    <FirebaseAppProvider firebaseConfig={firebaseConfig}>
      <h1>🌯</h1>
      <SuspenseWithPerf fallback={<p>loading burrito status...</p>} traceId={'load-burrito-status'}>
        <Burrito />
      </SuspenseWithPerf>
    </FirebaseAppProvider>
  );
}

// Enable Concurrent Mode
// https://reactjs.org/docs/concurrent-mode-adoption.html#enabling-concurrent-mode
createRoot(document.getElementById('root')).render(<App />);

---

If you're looking for docs for the deprecated ReactFirebase v1 (the one that uses mixins), click here

Contributors ✨

Thanks goes to these wonderful people (emoji key):

w3bdesign 💻

Scott Prue 💻

Jeff 💻

This project follows the all-contributors specification. Contributions of any kind welcome!