Example use
Check out the
live version on StackBlitz!
import React, { Component } from "react";
import { render } from "react-dom";
import "firebase/firestore";
import {
FirebaseAppProvider,
useFirestoreDocData,
useFirestore,
} from "reactfire";
const firebaseConfig = {
/* Add your config from the Firebase Console */
};
function Burrito() {
// easily access the Firestore library
const burritoRef = useFirestore().collection("tryreactfire").doc("burrito");
// subscribe to a document for realtime updates. just one line!
const { status, data } = useFirestoreDocData(burritoRef);
// easily check the loading status
if (status === "loading") {
return <p>Fetching burrito flavor...</p>;
}
return <p>The burrito is {data.yummy ? "good" : "bad"}!</p>;
}
function App() {
return (
<FirebaseAppProvider firebaseConfig={firebaseConfig}>
<h1>🌯</h1>
<Burrito />
</FirebaseAppProvider>
);
}
render(<App />, document.getElementById("root"));
If you're looking for docs for the deprecated ReactFire v1 (the one that
uses mixins), click
here