Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
reactfire
Advanced tools
Hooks, Context Providers, and Components that make it easy to interact with Firebase.
useUser
and useFirestoreCollection
let you easily subscribe to
auth state, realtime data, and all other Firebase SDK events. Plus, they automatically unsubscribe when your component unmounts.useFirestore
. Remote Config? useRemoteConfig
.enablePersistence
to be set before any data fetches are made. This can be tough to support in React's world of re-renders. ReactFire gives you useInitFirestore
and useInitRemoteConfig
hooks that guarantee they're set before anything else.# npm
npm install --save firebase reactfire
# or
# yarn
yarn add firebase reactfire
Depending on your targeted platforms you may need to install polyfills. The most commonly needed will be globalThis and Proxy.
Check out the live version on StackBlitz!
import React from 'react';
import { render } from 'react-dom';
import { doc, getFirestore } from 'firebase/firestore';
import { FirebaseAppProvider, FirestoreProvider, useFirestoreDocData, useFirestore, useFirebaseApp } from 'reactfire';
const firebaseConfig = {
/* Add in your config object from the Firebase console */
};
function BurritoTaste() {
// access the Firestore library
const burritoRef = doc(useFirestore(), 'tryreactfire', 'burrito');
// subscribe to a document for realtime updates. just one line!
const { status, data } = useFirestoreDocData(burritoRef);
// 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() {
const firestoreInstance = getFirestore(useFirebaseApp());
return (
<FirestoreProvider sdk={firestoreInstance}>
<h1>🌯</h1>
<BurritoTaste />
</FirestoreProvider>
);
}
render(
<FirebaseAppProvider firebaseConfig={firebaseConfig}>
<App />
</FirebaseAppProvider>,
document.getElementById('root')
);
This repository is maintained by Googlers but is not a supported Firebase product. Issues here are answered by maintainers and other community members on GitHub on a best-effort basis.
These features are marked as extra experimental because they use experimental React features that will not be stable until sometime after React 18 is released.
<Suspense>
- ReactFire's hooks throw promises
that Suspense can catch. Let React
handle loading states for you.Suspense
load times - Need to automatically instrument your Suspense
load times with RUM? Use <SuspenseWithPerf />
.Enable concurrent mode features by following the concurrent mode setup guide and then setting the suspense
prop in FirebaseAppProvider
:
<FirebaseAppProvider firebaseConfig={firebaseConfig} suspense={true}>
See concurrent mode code samples in example/withSuspense
FAQs
Firebase library for React
The npm package reactfire receives a total of 8,377 weekly downloads. As such, reactfire popularity was classified as popular.
We found that reactfire demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.