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