reactfire alternatives and similar libraries
Based on the "Framework bindings / integrations" category.
Alternatively, view reactfire alternatives based on common mentions on social networks and blogs.
-
react-on-rails
Integration of React + Webpack + Rails + rails/webpacker including server-side rendering of React, enabling a better developer experience and faster client performance. -
react-unity-webgl
React Unity WebGL provides a modern solution for embedding Unity WebGL builds in your React Application while providing advanced APIs for two way communication and interaction between Unity and React. -
backbone-react-component
A bit of nifty glue that automatically plugs your Backbone models and collections into your React components, on the browser and server -
gl-react
DISCONTINUED. OpenGL / WebGL bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm. -
gl-react-dom
WebGL bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm -
elm-react-component
DISCONTINUED. A React component which wraps an Elm module to be used in a React application.
CodeRabbit: AI Code Reviews for Developers
Do you think we are missing an alternative of reactfire or a related project?
README
ReactFire
Hooks, Context Providers, and Components that make it easy to interact with Firebase.
What is ReactFire?
- Easy realtime updates for your function components - Hooks
like
useUser
anduseFirestoreCollection
let you easily subscribe to auth state, realtime data, and all other Firebase SDK events. Plus, they automatically unsubscribe when your component unmounts. - Access Firebase libraries from any component - Need the Firestore SDK?
useFirestore
. Remote Config?useRemoteConfig
. - Safely configure Firebase libraries - Libraries like Firestore and Remote Config require settings like
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 youuseInitFirestore
anduseInitRemoteConfig
hooks that guarantee they're set before anything else.
Install
# 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.
Docs
- [Quickstart](./docs/quickstart.md)
- [Common Use Cases](./docs/use.md)
- [API Reference](./docs/reference)
- [v3 -> v4 Upgrade Guide](./docs/upgrade-guide.md)
Example use
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')
);
Status
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.
Extra Experimental concurrent mode features
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.
- Loading states handled by
<Suspense>
- ReactFire's hooks throw promises that Suspense can catch. Let React handle loading states for you. - Automatically instrument your
Suspense
load times - Need to automatically instrument yourSuspense
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