dustinsenos / reactfire

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

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

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

Status: Alpha

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,
  useFirestoreDoc,
  useFirebaseApp,
  SuspenseWithPerf
} from 'reactfire';

import 'firebase/performance';
import 'firebase/firestore';

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

function Burrito() {
  // create a ref
  const firebaseApp = useFirebaseApp();
  const burritoRef = firebaseApp
    .firestore()
    .collection('tryreactfire')
    .doc('burrito');

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

  // get the value from the doc
  const isYummy = burritoDoc.data().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. At the project root, run yarn install
2. cd into the reactfire directory. Run yarn and yarn watch.
3. In a new terminal, cd into the reactfire/sample-simple directory. run yarn and yarn start.
4. 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