2.0.0-fb1c5169 • Published 4 years ago
@jakehedman/reactfire v2.0.0-fb1c5169
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
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
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
Contributing
For development
- 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.
Testing
cd
into the reactfire/reactfire directory- run
yarn test
2.0.0-fb1c5169
4 years ago