All Projects β†’ FirebaseExtended β†’ Reactfire

FirebaseExtended / Reactfire

Licence: mit
Hooks, Context Providers, and Components that make it easy to interact with Firebase.

Programming Languages

32286 projects
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Reactfire

React Native Firebase
πŸ”₯ A well-tested feature-rich modular Firebase implementation for React Native. Supports both iOS & Android platforms for all Firebase services.
Stars: ✭ 9,674 (+232.67%)
Mutual labels:  firebase, firestore, realtime-database, react-hooks
SapphireDb Server, a self-hosted, easy to use realtime database for Asp.Net Core and EF Core
Stars: ✭ 326 (-88.79%)
Mutual labels:  firebase, firestore, realtime-database
The officially supported adapter for using Firebase with Ember
Stars: ✭ 689 (-76.31%)
Mutual labels:  firebase, firestore, realtime-database
Nativescript Plugin Firebase
πŸ”₯ NativeScript plugin for Firebase
Stars: ✭ 990 (-65.96%)
Mutual labels:  firebase, firestore, realtime-database
React Firebase Hooks
React Hooks for Firebase.
Stars: ✭ 2,227 (-23.42%)
Mutual labels:  firebase, react-hooks
An effort to bring Google's Firebase C++ API to Qt + QML
Stars: ✭ 208 (-92.85%)
Mutual labels:  firebase, realtime-database
Firestore Simple
More simple, powerfull and TypeScript friendly Firestore wrapper.
Stars: ✭ 145 (-95.01%)
Mutual labels:  firebase, firestore
Firestore Cloud Functions Typescript
Firebase cloud functions in typescript with Firestore. Using a social network as example
Stars: ✭ 171 (-94.12%)
Mutual labels:  firebase, firestore
Combine wrapper on Google's iOS Firebase library.
Stars: ✭ 126 (-95.67%)
Mutual labels:  firebase, firestore
Use Http
🐢 React hook for making isomorphic http requests
Stars: ✭ 2,066 (-28.95%)
Mutual labels:  react-suspense, react-hooks
A sample project entirely written in Kotlin. Backend/Frontend with Ktor and Android app.
Stars: ✭ 221 (-92.4%)
Mutual labels:  firebase, firestore
A fully functional Instagram clone written in Flutter using Firebase / Firestore
Stars: ✭ 1,944 (-33.15%)
Mutual labels:  firebase, firestore
Nextjs Vercel Firebase
Next.js app using API routes to connect with Firestore.
Stars: ✭ 133 (-95.43%)
Mutual labels:  firebase, firestore
Highlight Utils
My tools for converting, importing, and processing Kindle, Instapaper, and Safari Books highlights
Stars: ✭ 143 (-95.08%)
Mutual labels:  firebase, firestore
Chatair Android
πŸ”₯ A highly advance featured chat app in android using Firestore
Stars: ✭ 132 (-95.46%)
Mutual labels:  firebase, firestore
Google Cloud Firestore modern and simplest convenient ORM package in Python. FireO is specifically designed for the Google's Firestore
Stars: ✭ 163 (-94.39%)
Mutual labels:  firebase, firestore
Node Firestore Backup
Google Firebase Firestore backup tool
Stars: ✭ 192 (-93.4%)
Mutual labels:  firebase, firestore
[NOT MAINTAINED]An API integration framework using GraphQL
Stars: ✭ 182 (-93.74%)
Mutual labels:  firebase, firestore
Expo Firebase Starter
πŸ”₯βš›οΈπŸ“± Expo + Firebase Starter Kit
Stars: ✭ 199 (-93.16%)
Mutual labels:  firebase, firestore
πŸ”₯GeoFlutterFireπŸ”₯ is an open-source library that allows you to store and query firestore documents based on their geographic location.
Stars: ✭ 207 (-92.88%)
Mutual labels:  firebase, firestore


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 useUserand useFirestoreCollection 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 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.


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}>
      <BurritoTaste />

  <FirebaseAppProvider firebaseConfig={firebaseConfig}>
    <App />


Status: Experimental

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 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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].