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 reactfire@next
# yarn
yarn add reactfire@next

If you like living life on the edge, use reactfire@canary.

Check out the live version on StackBlitz!

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

import 'firebase/performance';

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

function Burrito() {
  // lazy load the Firestore SDK and create a ref
  const burritoRef = useFirestore()
    .collection('tryreactfire')
    .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);

  // 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>
      <h1>🌯</h1>
      <SuspenseWithPerf
        fallback={'loading burrito status...'}
        traceId={'load-burrito-status'}
      >
        <Burrito />
      </SuspenseWithPerf>
    </FirebaseAppProvider>
  );
}

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

• Quickstart
• Common Use Cases
• API Reference