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

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

Status: Alpha. ReactFire is meant for React Concurrent Mode, which is only available in experimental React builds.

What is ReactFire?

  • Easy realtime updates for your function components - Reactfire's hooks, like useFirestoreCollection and useUser, let you easily subscribe to events, and automatically unsubscribe when your component unmounts.
  • Loading states handled by <Suspense> - Reactfire's hooks throw promises that Suspense can catch. No more isLoaded ?... - let React handle it for you.
  • Dead-simple Real User Monitoring (RUM) - Easily enable Firebase Performance Monitoring's automatic traces, and instrument your Suspenseful loads with Reactfire's <SuspenseWithPerf> component


# npm
npm install --save reactfire

# yarn
yarn add reactfire

Example use

Check out the live version on StackBlitz!

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
import {
} from 'reactfire';

const firebaseConfig = {
  /* add your config object from the Firebase console */

function Burrito() {
  // lazy load the Firestore SDK and create a ref
  const burritoRef = useFirestore()

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

  // get the value from the doc
  const isYummy = burrito.yummy;

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

function App() {
  return (
    <FirebaseAppProvider firebaseConfig={firebaseConfig} initPerformance>
        fallback={'loading burrito status...'}
        <Burrito />

render(<App />, document.getElementById('root'));