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.
- Easy realtime updates for your function components - Reactfire's hooks,
like
useFirestoreCollection
anduseUser
, 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 moreisLoaded ?...
- 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
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'));
- Clone this repository (or a fork)
- At the project root, install all modules by running
yarn install
. cd
into the reactfire directory. Runyarn
andyarn watch
.- In a new terminal,
cd
into the reactfire/sample directory. runyarn
andyarn start
. - Head over to https://localhost:3000 to see the running sample! If you edit the reactfire source, the sample will reload.
cd
into the reactfire/reactfire directory- run
yarn test