Reactfire

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

Install

# npm
npm install reactfire@next
# yarn
yarn add reactfire@next

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

Example use

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

Learn More

• Quickstart
• Common Use Cases
• API Reference

Contributing

For development

1. Clone this repository (or a fork)
2. At the project root, install all modules by running yarn install.
3. cd into the reactfire directory. Run yarn and yarn watch.
4. In a new terminal, cd into the reactfire/sample directory. run yarn and yarn start.
5. Head over to https://localhost:3000 to see the running sample! If you edit the reactfire source, the sample will reload.

Testing

1. cd into the reactfire/reactfire directory
2. run yarn test