React Hooks for Firebase.

Overview

React Firebase Hooks

A set of reusable React Hooks for Firebase.

npm version npm downloads

Official support for Hooks was added to React Native in v0.59.0. React Firebase Hooks works with both the Firebase JS SDK and React Native Firebase, although some of the Flow and Typescript typings may be incorrect - we are investigating ways to improve this for React Native Firebase users.

This documentation is for v2 of React Firebase Hooks which involved a number of breaking changes, including switching from Object to Array returns - more details here. For v1 documentation, see here.

Installation

React Firebase Hooks requires React 16.8.0 or later and Firebase v5.0.0 or later.

npm install --save react-firebase-hooks

This assumes that you’re using the npm package manager with a module bundler like Webpack or Browserify to consume CommonJS modules.

Why?

There has been a lot of hype around React Hooks, but this hype merely reflects that there are obvious real world benefits of Hooks to React developers everywhere.

This library explores how React Hooks can work to make integration with Firebase even more straightforward than it already is. It takes inspiration for naming from RxFire and is based on an internal library that we had been using in a number of apps prior to the release of React Hooks. The implementation with hooks is 10x simpler than our previous implementation.

Upgrading from v1 to v2

After feedback on the initial release of React Firebase Hooks, we opted to change from Object to Array returns to allow for easier composition of hooks in v2.

To upgrade your project from v1 to v2 check out the Release Notes which have full details of everything that needs to be changed.

Documentation

License

Comments
  • Improve useList efficiency

    Improve useList efficiency

    1. Use the .once’s val() to determine the number of children, then batch that many calls to the child_added handler into one value dispatch, resulting in one additional render instead of one progressively slower render per child.
    2. Fix shadowing of query variable, rename to ref instead.
    3. Fix the ref.off calls to pass the right function to unsubscribe.
    4. Fix dependencies on useEffect.
    5. Fix some type references.

    Fixes #74

    opened by caleb-harrelson 23
  • Q. Should hooks return an Object or an Array?

    Q. Should hooks return an Object or an Array?

    makes sense: snapshot.data(); snapshot.id

    doesn't: value.data(); value.id

    Just food for though. I see you pushed 1.0 so I doubt you wanna make breaking changes. I can just wrap anyway

    feedback wanted 
    opened by tograd 21
  • useDocumentData returns undefined on first render until forced browser refresh returns data

    useDocumentData returns undefined on first render until forced browser refresh returns data

    import { doc } from 'firebase/firestore';
    import { createContext, useEffect, useState } from 'react';
    import { auth, db } from '../firebase/firebase-config';
    import {
      useDocumentData,
      useDocumentDataOnce,
    } from 'react-firebase-hooks/firestore';
    import { useAuthState } from 'react-firebase-hooks/auth';
    
    const userAuthContext = createContext({});
    
    const UserAuthContextProvider = ({ children }: any) => {
    
      const [authUser, loadingAuthUser, errorAuthUser] = useAuthState(auth);
      
      const [authUserDocRef, setAuthUserDocRef]: any = useState();
      
      const [userData, loading, error, snapshot, reload] =
        useDocumentDataOnce(authUserDocRef);
    
      const [businessDocRef, setBusinessDocRef]: any = useState();
    
      const [
        businessData,
        loadingBusinessData,
        errorBusinessData,
        snapshotBusinessData,
      ] = useDocumentData(businessDocRef);
    
      useEffect(() => {
        if (authUser) {
          setAuthUserDocRef(doc(db, 'users', authUser.uid));
        }
    
        if (userData) {
          setBusinessDocRef(userData.managedBusiness);
        }
      }, [authUser, userData]);
    
      return (
        <userAuthContext.Provider
          value={{ authUser, businessData, loadingBusinessData }}
        >
          {children}
        </userAuthContext.Provider>
      );
    };
    
    export { userAuthContext, UserAuthContextProvider };
    

    businessData returns undefined. I have to manually force refresh the browser for businessData to return the correct value from Firestore.

    feedback wanted 
    opened by BinDohry 19
  • Firebase 9 Support

    Firebase 9 Support

    Adds support for Firebase 9.

    Closes #105

    Firestore and Database hooks are using the compat imports currently, as I'm not familiar with those APIs. In order to get the full tree-shaking improvements of Firebase 9, these compat imports will need to be updated.

    opened by jdpowell1 17
  • Firebase 9

    Firebase 9

    Many people are waiting for https://github.com/CSFrequency/react-firebase-hooks/pull/153. As it is not merged but also doesn't contain a full migration of this package to firebase v9, I tried to migrate everything in one go.

    This PR makes it possible to use react-firebase-hooks with Firebase v9 without using compatibility imports (firebase/compat/...).

    This package migrates all components: auth, storage, firestore, database

    This PR also already includes updates to the documentation.

    This PR is published as react-firebase9-hooks. The package will not be maintained after this PR is merged and [email protected] is released. The package only exists to test this PR. It can be simply used in your project by updating the package.json to

    "dependencies": {
        "react-firebase-hooks": "npm:[email protected]",
    }
    

    TODO

    • [ ] Are the flow types correct? Did they ever work?
    • [ ] ~Manually test all hooks~ Test RDS hooks

    Before merging the PR

    • [x] Revert changes to name and version in package.json and package-lock.json
    • [x] Remove disclaimer from README

    closes #105 closes #162 closes #172

    opened by andipaetzold 14
  • useAuthState inconsistent persistence

    useAuthState inconsistent persistence

    I'm not too sure what is going on but I have two components in my app that use the useAuthState hook.

    const  = ({ calloutText }) => {
      const [user, loading] = useAuthState(firebase.auth());
    
      console.log('WelcomeOrCallout', user);
    
      if (user) {
        return (
          <span className="button" style={{ display: 'inline-block' }}>
            👋 Welcome back
          </span>
        );
      }
    
      if (loading) {
        return <Spinner />;
      }
    
      return <Callout text={calloutText} href={'signup'} />;
    };
    

    and

    export const Links = ({ routes }) => {
      const [user, loading] = useAuthState(firebase.auth());
    
      console.log('Links', user);
    
      if (loading) {
        return null;
      }
    
      if (user) {
        return <UserMenu user={user} />;
      }
    
      return routes.map(
        ({ path, name, url, shouldHideFromNav, requiresAuth }, i) => {
          if (shouldHideFromNav) {
            return null;
          }
    
          if (requiresAuth && !user) {
            return null;
          }
    
          return (
            <>
              <li key={i}>
                <NavLink href={path} name={name} url={url} />
              </li>
              <li className="has-button">
                <Callout className="small" text={'Sign up'} />
              </li>
            </>
          );
        }
      );
    };
    

    Now, here is the weird thing, when I use useAuthState in WelcomeOrCallout, even after signing out, Links returns a user from the hook while WelcomeOrCallout does not.

    If I do NOT use useAuthState in WelcomeOrCallout, Links works as expected, not rendering the UserMenu.

    Is there anything I am doing wrong here that could cause this to happen? Scratching my head honestly.

    Here's my sign out page code (this is a next-js app)

    export default () => {
      firebase.auth().signOut();
    
      return (
        <Page>
          <Content loading />
          <Redirect route="/" />
        </Page>
      );
    };
    

    Note: What's also interesting is that if I log firebase.auth() in both components, after signing out the currentUser value is null. So it seems that the sign out is working on the firebase client end, but the hook isn't updating correctly?

    opened by rohan-deshpande 14
  • Firestore hooks - run function on data update

    Firestore hooks - run function on data update

    Is there a simple way to run a function every time a new snapshot is loaded by the client? I need to run a simple function that makes some changes to the data gotten from firestore, and then sets a useState value. Currently, you can only use the variable provided when you initialise a useCollection hook, meaning it is hard to format the data first before using the variable in JSX.

    opened by benjamin-sommer 13
  • [firestore]: infinite render

    [firestore]: infinite render

    In version 5, there is an infinite rendering of the component, which uses the hooks of this package. In 10 seconds, the hook manages to make ~ 1500 requests to the firestore. To check - I started a clean project, but the problem is still there.

    App.jsx

    import logo from './logo.svg';
    import './App.css';
    
    import { initializeApp } from 'firebase/app';
    import { getFirestore, collection, connectFirestoreEmulator } from 'firebase/firestore';
    import { useCollection } from 'react-firebase-hooks/firestore';
    
    const firebaseConfig = {
      apiKey: process.env.REACT_APP_API_KEY,
      authDomain: process.env.REACT_APP_AUTH_DOMAIN,
      projectId: process.env.REACT_APP_PROJECT_ID,
      storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
      messagingSenderId: process.env.REACT_APP_SENDER_ID,
      appId: process.env.REACT_APP_APP_ID,
    };
    
    const app = initializeApp(firebaseConfig);
    const firestore = getFirestore(app);
    connectFirestoreEmulator(firestore, 'localhost', 8080);
    
    function App() {
       const [value, loading, error] = useCollection(
        collection(firestore, 'hooks'),
        {
          snapshotListenOptions: { includeMetadataChanges: true },
        }
      );
       
       console.log('app');
        
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              Edit <code>src/App.js</code> and save to reload.
            </p>
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
          </header>
        </div>
      );
    }
    
    export default App;
    

    package.json

    {
      "name": "my-app",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "@testing-library/jest-dom": "^5.16.2",
        "@testing-library/react": "^12.1.2",
        "@testing-library/user-event": "^13.5.0",
        "firebase": "^9.6.5",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-firebase-hooks": "^5.0.1",
        "react-scripts": "5.0.0",
        "web-vitals": "^2.1.4"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },
      "eslintConfig": {
        "extends": [
          "react-app",
          "react-app/jest"
        ]
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      }
    }
    

    image image

    Version 4 didn't have this problem. I noticed this behavior when my project made 89k requests in 15 minutes

    image

    At the same time, I did not change anything in the source code, I only updated the "react-firebase-hooks" package. After that I created a clean project for testing, but the problem still remained

    opened by BARTlab 12
  • Publish new version on NPM

    Publish new version on NPM

    Hi,

    The current version on NPM doesn't seem up to date and I have errors while building my webapp with Typescript:

    image

    image

    Could you please publish a new version on NPM?

    PS: Thanks a lot for this package, that's great!

    opened by Godefroy 11
  • Add support of nulled references as props of hooks

    Add support of nulled references as props of hooks

    Developing using these hooks, I've been in front of situations that references cannot be mounted at the first component execution. As explained on (https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level)[React docs], hooks cannot be called inside as an if statement.

    To avoid this, we can pass an invalid reference to the firebase hooks. But, if you have implemented the strongest security rules, you will receive a permission denied error.

    So, we need to pass references optionally to solve all of these problems.

    I've already added support by this PR!

    Example of usage in a container that fits authenticated or not state:

    export function useUsername() {
      const { user } = useAuthState(auth)
      const usernameRef = user
        ? db.child('profiles').child(user.uid).child('username')
        : undefined
      const { value: username, loading, error } = useDatabaseObject(usernameRef)
      return { username, loading, error }
    }
    
    opened by neilor 9
  • Add useMemo() for value fetching hooks

    Add useMemo() for value fetching hooks

    React.memo() will work as expected with this!

    Without this, rerender (e.g. calling setState() of useState() in the render function) will cause useCollectionData() and useDocumentData() (and realtime database counter parts) to return different reference (!==) of data.

    opened by ypresto 8
  • Is it possible to add a type to the data returned by useCollectionData hook?

    Is it possible to add a type to the data returned by useCollectionData hook?

    I would like to add a type to the data returned by the useCollectionData firestore hook. Currently I am using it like so -

    import React from "react"
    import {collection, query} from "firebase/firestore"
    import {useCollectionData} from "react-firebase-hooks/firestore"
    import { db } from "./firebase-setup/firebase"
    
    export interface EntryObject {
      rating: number
    }
    
    export const App = () => {
    
      const [data, loading, error] = useCollectionData(
        query(collection(db, "entries"))
      );
    
      console.log(data, loading, error)
    
      return (
        <div>
          {(data as EntryObject[])?.map((ele: EntryObject) => {return <div>{ele.rating}</div>})}
        </div>
      )
    }
    

    I would like the data const to be of type EntryObject[]. Currently I am declaring this at the start of the map function, which does work, but ideally I'd know the type of data before mapping it. Is this currently possible?

    My firebase initialization file is -

    import {getFirestore} from "firebase/firestore";
    import "firebase/storage";
    import "firebase/auth";
    import {initializeApp} from "firebase/app"
    
    const firebaseConfig = {
      apiKey: ---
      authDomain: ---
      projectId: ---
      storageBucket: ---
      messagingSenderId: ---
      appId: ---
      measurementId: ---
    };
    
    const app = initializeApp(firebaseConfig);
    
    const db = getFirestore(app);
    
    export {db}
    

    Package versions

    "firebase": "^9.15.0", "react-firebase-hooks": "^5.1.1",

    opened by JamesBrightman 0
  • How does this compare to ReactFire?

    How does this compare to ReactFire?

    They seem to be accomplishing the same thing and I am kind of stuck in the middle.

    ReactFire uses the context providers, while this doesn't. I am not sure what the benefits are.

    What are the pros and cons of each library?

    PS. I also see App Check integration is missing here?

    opened by igalci 0
  • React has detected a change in the order of Hooks

    React has detected a change in the order of Hooks

    I am thinking of maybe trying to migrate to Nextjs. I am sure I am using Nextjs wrong but I get this error when using useDocument or useDocumentData directly on a page route.

    `next-dev.js?3515:20 Warning: React has detected a change in the order of Hooks called by MobileNav. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

    Previous render Next render

    1. useReducer useReducer
    2. useCallback useCallback
    3. useCallback useCallback
    4. useCallback useCallback
    5. useMemo useMemo
    6. useEffect useEffect
    7. useReducer useReducer
    8. useCallback useCallback
    9. useCallback useCallback
    10. useCallback useCallback
    11. useMemo useMemo
    12. useRef useRef
    13. useEffect useEffect
    14. useEffect useEffect
    15. useContext useContext
    16. useContext useContext
    17. undefined useContext ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^`

    BTW. I wouldn't have created an issue if there was a discussion area Sorry

    opened by Schmell 0
  • Suspense support?

    Suspense support?

    I really like this library because it's a fairly lightweight set of Firebase hooks. The only thing that seems to be missing is Suspense support.

    Any chance we'll see it?

    opened by bruceharrison1984 0
  • Enable support for query count

    Enable support for query count

    Count documents with aggregation queries is now supported https://firebase.google.com/docs/firestore/query-data/aggregation-queries.

    can we add support for the same,

    useCollectionCount?????

    I can work on this

    enhancement 
    opened by Rohitbels 2
Releases(v5.1.1)
  • v5.1.1(Nov 15, 2022)

    Release Notes

    Bug fixes

    • Fixes missing import for useIdToken - thanks @vwxyutarooo

    Full Changelog: https://github.com/CSFrequency/react-firebase-hooks/compare/v5.1.0...v5.1.1

    Source code(tar.gz)
    Source code(zip)
  • v5.1.0(Nov 9, 2022)

    Release Notes

    It's been a while since the last release, so this has been a bit of a housekeeping release focused on landing outstanding PRs and resolving a few of the simpler issues that have been reported.

    I'm aware there are some outstanding issues with React 18 that require some deeper investigation and these will be tackled in a future release.

    Special thanks to @levino for putting a test framework in place and adding our first test. We would welcome PRs with additional tests to improve the resilience of the library!

    New Hooks

    • [auth] Add useSendPasswordResetEmail - thanks to @mparsakia
    • [auth] Add useDeleteUser - thanks to @RobertSasak
    • [auth] Add useSignOut - thanks to @RobertSasak
    • [auth] Add useVerifyBeforeUpdateEmail - thanks to @skratchdot
    • [auth] Add useIdToken #223
    • [auth] Add useSendSignInLinkToEmail and useSignInWithEmailLink #261

    New Features

    • [auth] useCollection and useDocument now supports an optional initialValue option which sets the default value for hooks. This had been missed in the upgrade from v3 to v4 - thanks to @mauriceackel and @dylanwatsonsoftware
    • [auth] All methods returned by the createUser and signInWithXXX hooks will return the UserCredential when successful #251
    • [auth] All methods returned by updateXXX and sendXXX hooks will return a boolean to indicate success or failure

    Bug fixes

    • Ensure that all internal functions are wrapped in useCallback to prevent unnecessary renders - thanks to @wong2 and @pzmudzinski

    Full Changelog: https://github.com/CSFrequency/react-firebase-hooks/compare/v5.0.3...v5.1.0

    Source code(tar.gz)
    Source code(zip)
  • v5.0.3(Feb 23, 2022)

    Release Notes

    Bug fixes

    • [auth] Correctly clear the error message when re-submitting the update functions #213 - thanks @cargallo
    • [functions] Fix HttpsCallable return type #210 - thanks @sanny-io
    Source code(tar.gz)
    Source code(zip)
  • v5.0.2(Feb 4, 2022)

  • v5.0.1(Jan 31, 2022)

  • v5.0.0(Jan 21, 2022)

    Release Notes

    This is one of the biggest releases for a while, bringing a raft of simplifications to the underlying code and a number of new hooks to support a greater breadth of Firebase functionality.

    Breaking Changes

    • [firestore] useCollectionData and useDocumentData hooks no longer supports idField, refField or transform options as these are incompatible with the new Firebase v9 typings. Instead, use the built in FirestoreDataConverter functionality to control how the snapshots returned by Firebase are converted.
    • [typings] Flow typings have been removed as they were wildly out of date

    New Hooks

    • [auth] Add a number of social login hooks: useSignInWithApple, useSignInWithFacebook, useSignInWithGithub, useSignInWithGoogle, useSignInWithMicrosoft, useSignInWithTwitter and useSignInWithYahoo - thanks to @isaiah-solo for the original useSignInWithGoogle hook that was adapted.
    • [auth] Add a number of user update hooks: useUpdateEmail, useUpdatePassword and useUpdateProfile
    • [auth] Add a couple of email hooks: useSendPasswordResetEmail and useSendEmailVerification
    • [functions] Add the useHttpsCallable hook to allow callable Cloud Functions to be executed
    • [messaging] Add the useToken hook to allow access to the Cloud Messaging token
    • [storage] Add the useUploadFile hook to allow files to be uploaded to Cloud Storage - thanks to @dohomi for the inspiration

    New Features

    • [auth] useAuthState now supports an optional onUserChanged option to allow custom functions to be called when a user changes, e.g. to access custom claims (#139) - thanks to @dohomi
    • [firestore] useCollectionData and useDocumentData now return the snapshot object to allow access to things like metadata
    • [firestore] use***Once hooks now return a reload function to allow manual reloading of the data

    Bug fixes

    • [firestore] use***Once hooks now protect against race conditions (#201) - thanks to @mrtnkb

    Full Changelog: https://github.com/CSFrequency/react-firebase-hooks/compare/v4.0.1...v5.0.0

    Source code(tar.gz)
    Source code(zip)
  • v4.0.2(Jan 11, 2022)

  • v3.0.5(Dec 21, 2021)

    Release Notes

    New features

    • [firestore] Add support for initialValue when using Firestore data hooks (#190 and #191 ) - thanks to @dylanwatsonsoftware
    Source code(tar.gz)
    Source code(zip)
  • v4.0.1(Nov 8, 2021)

  • v4.0.0(Nov 1, 2021)

    Release Notes

    A big thank you to @andipaetzold who made the underlying changes for this release.

    Breaking Changes

    • This release updates react-firebase-hooks to support Firebase v9, the new modular SDK from Firebase. Whilst there should be no changes required to the way that you interact with react-firebase-hooks, a number of changes will need to be made to how you interact with the underlying Firebase SDKs. More can be found here.
    Source code(tar.gz)
    Source code(zip)
  • v3.0.4(Apr 24, 2021)

    Release Notes

    Bug fixes

    • [database] Fix useList when a new child is added (#141) - thanks to @cryser29
    • [types] Export IDOptions to prevent tsc compilation issues (#135) - thanks to @Snailed
    • [types] Export AuthActionHook to prevent compilation issues. Fixes #127
    Source code(tar.gz)
    Source code(zip)
  • v3.0.3(Mar 19, 2021)

    Release Notes

    New features

    • [auth] Add support for emailVerificationOptions when using useCreateUserWithEmailAndPassword (#125 and #130) - thanks to @dohomi

    Bug fixes

    • [database] Correctly type refField as Reference
    • [firestore] Correctly type refField as DocumentReference (#126 ) - thanks to @dangreaves
    • [firestore] Correctly support withConverter (#129) - thanks to @berdyshev
    Source code(tar.gz)
    Source code(zip)
  • v3.0.2(Mar 9, 2021)

    Release Notes

    Bug fixes

    • [auth] Remove unnecessary firebase/auth import to reduce bundle size (#122) - thanks to @exKAZUu
    • [firestore] Fix issues with DocumentData typescript typings (#120) - thanks to @dangreaves for the suggested fix
    Source code(tar.gz)
    Source code(zip)
  • v3.0.1(Mar 2, 2021)

    Release Notes

    Breaking Changes

    • Due to changes in the underlying Firebase types, v3 of react-firebase-hooks requires Firebase v8 or higher (#86) - thanks to @mdirolf

    New Features

    • [auth] Add useCreateUserWithEmailAndPassword and useSignInWithEmailAndPassword hooks (#98) - thanks to @lorstenoplo
    • [database] Add transform option for realtime database hooks (#95) - thanks to @satyam
    • [firestore] Add an optional refField that is populated with the firebase.firestore.QuerySnapshot.ref property (#80) - thanks to @mauriceackel
    • [firestore] Add support for snapshotOptions (#78)
    • [firestore] Add transform option for firestore hooks

    Performance Improvements

    • Responses from all hooks are now memoized to prevent unnecessary renders (#79) - thanks to @sdemjanenko
    • [database] Improve useList efficiency (#90) - thanks to @caleb-harrelson

    Typing Improvements

    • [auth] Fix return type for useAuthState (#107) - thanks to @kqito
    • [database] Add keyField and refField to generics
    • [firestore] Add generics to allow the returned data to be typed (#75) - thanks to @Lynges
    • [firestore] Add idField and refField to generics (#50)
    • [firestore] Add additional firestore.DocumentReference type information to all hooks (#67)
    Source code(tar.gz)
    Source code(zip)
  • v3.0.0(Mar 2, 2021)

  • v2.2.0(May 25, 2020)

    Improvements

    • Add useMemo() for value fetching hooks to prevent unnecessary re-renders https://github.com/CSFrequency/react-firebase-hooks/pull/41 - thanks to @ypresto
    Source code(tar.gz)
    Source code(zip)
  • v2.1.1(Nov 11, 2019)

  • v2.1.0(Aug 2, 2019)

    Bug fixes

    • Typescript now explicitly returns undefined instead of void #26
    • Correctly clear value field when Firebase returns an error
    • Correctly clear error field when Firebase returns a value
    • Catch errors from realtime database listeners
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(May 21, 2019)

    Release Notes

    Breaking Changes

    • All hooks now return an array rather than an object to enable easier composition of hooks. The structure of this array is generally:
    const [value, loading, error] = useHook();
    
    • Any hooks with optional parameters now have a single options object parameter which contains all optional parameters:
      • Firestore:

        • useCollection(query, options) is now useCollection(query, { snapshotListenOptions })
        • useCollectionOnce(query, options) is now useCollectionOnce(query, { getOptions })
        • useCollectionData(query, options, idField) is now useCollectionData(query, { idField, snapshotListenOptions })
        • useCollectionDataOnce(query, options, idField) is now useCollectionDataOnce(query, { getOptions, idField })
        • useDocument(ref, options) is now useDocument(ref, { snapshotListenOptions })
        • useDocumentOnce(ref, options) is now useDocumentOnce(ref, { getOptions })
        • useDocumentData(ref, options, idField) is now useDocumentData(ref, { idField, snapshotListenOptions })
        • useDocumentDataOnce(ref, options, idField) is now useDocumentDataOnce(ref, { getOptions, idField })
      • Database:

        • useListVals<T>(ref, keyField) is now useListVals<T>(ref, { keyField })
        • useObjectVal<T>(ref, keyField) is now useObjectVal<T>(ref, { keyField })
    • Auth hooks now return firebase.auth.Error rather than firebase.FirebaseError as this is what the auth methods return from the SDK
    • Firestore hooks now return Error rather than firebase.FirebaseError as this is what the firestore methods return from the SDK

    New Features

    • Overhauled documentation to make it easier to read
    • Reworked behind the scenes to better re-use code
    Source code(tar.gz)
    Source code(zip)
  • v1.2.1(May 7, 2019)

    Bug fixes

    • #18 Return FirebaseError rather than object type - thanks @lucacasonato
    • #19 Return null instead of empty object when document doesn't exist - thanks @cmmartin
    Source code(tar.gz)
    Source code(zip)
  • v1.2.0(Apr 18, 2019)

    New Features

    • Add useCollectionData and useDocumentData hooks for react-firebase-hooks/firestore to use the underlying snapshot values
    • Add useCollectionOnce, useCollectionDataOnce, useDocumentOnce and useDocumentDataOnce to load the current value of the data rather than subscribe to updates
    • Add support for nulled references as hook properties #10 - thanks @neilor
    • Add support for keyField to useListVals and useObjectVal

    Bug fixes

    • Flow type fixes - thanks @tornewuff
    Source code(tar.gz)
    Source code(zip)
  • v1.1.0(Feb 14, 2019)

    Bug fixes

    • #6 loading should be set to true when reset
    • Updated how the default value is calculated to ensure that it is up to date when reset
    Source code(tar.gz)
    Source code(zip)
  • v1.0.0(Feb 6, 2019)

  • v0.5.0(Jan 18, 2019)

    Updates

    • useAuthState now takes the current value of auth.currentUser as the default value. Thanks to @lemol for the contribution.
    • peerDependencies now supports React v16.8.0-alpha.0 upwards
    Source code(tar.gz)
    Source code(zip)
  • v0.4.0(Nov 13, 2018)

    New Features

    • Add useListKeys hook for react-firebase-hooks/database to use the underlying snapshot keys, rather than the DataSnapshot objects
    • Add useListVal hook for react-firebase-hooks/database to use the underlying snapshot values, rather than the DataSnapshot object
    Source code(tar.gz)
    Source code(zip)
  • v0.3.2(Nov 4, 2018)

  • v0.3.1(Nov 4, 2018)

  • v0.3.0(Nov 1, 2018)

    New Features

    • Updated API to make it closer to RxFire
    • Split the library into sub-packages: react-firebase-hooks/auth, react-firebase-hooks/database, react-firebase-hooks/firestore and react-firebase-hooks/storage
    • Added support for multiple Firebase apps and theoretical support for React Native
    • The library is now written in TypeScript and includes TypeScript typings
    • Added Flow typings

    Upgrade instructions

    If you're already tried out an earlier version of React Firebase Hooks, then a very big thank you!

    Unfortunately, this version does introduce some breaking changes:

    • Hooks need to be imported from the appropriate sub-package: react-firebase-hooks/auth, react-firebase-hooks/database, react-firebase-hooks/firestore and react-firebase-hooks/storage
    • useCurrentUser is now useAuthState
    • useDatabaseList is now useList and returns a value prop rather than list to keep it consistent with other hooks
    • useDatabaseValue is now useValue
    • useFirestoreCollection is now useCollection
    • useFirestoreDocument is now useDocument
    • useDownloadURL now returns a value prop rather than url to keep it consistent with other hooks
    Source code(tar.gz)
    Source code(zip)
Owner
CS Frequency
Web, Mobile and Cloud Experts
CS Frequency
Lightweight dependency-free collection of React hooks for Firebase

React Firehooks ?? ?? Lightweight dependency-free collection of React hooks for Firebase. Installation npm install react-firehooks or yarn add react-f

Andi Pätzold 33 Nov 4, 2022
React Firebase Hooks: CRUD App with Realtime Database

React Firebase Hooks: CRUD App with Realtime Database Project setup In the project directory, you can run: npm install # or yarn install or Compiles

JS-IT 6 May 28, 2022
👩‍🍳 A React Hooks utility library containing popular customized hooks

React Recipes A React Hooks utility library containing popular customized hooks What's your favorite dish? npm i react-recipes --save yarn add react-r

Craig Walker 931 Dec 28, 2022
🍹 A lot of nice hooks to make react hooks easier to use ( useState callback / life cycle / instance variable)

?? Nice Hooks 中文版 A lot of nice hooks to make react hooks easier to use. If you find this project is useful to you, please give me a star. Installatio

Daniel.xiao 46 Dec 28, 2022
🔥 A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development 🔥

A collection of beautiful (and hopefully useful) React hooks to speed-up your components and hooks development ?? Live playground here ?? ???? English

Antonio Rù 6.5k Dec 29, 2022
Learn the more advanced React hooks and different patterns to enable great developer APIs for custom hooks

?? Advanced React Hooks ?? EpicReact.Dev Learn the more advanced React hooks and different patterns to enable great developer APIs for custom hooks. W

José Gonçalves 4 Mar 15, 2022
Use-supabase-hooks contains react hooks for common supabase functions, with type safety!

Use-supabase-hooks contains react hooks for common supabase functions, with type safety!

Anurag 15 Oct 23, 2022
ReactJs Custom hooks, component lifecycle - Indispensable hooks

ReactJs Custom hooks, component lifecycle - Indispensable hooks

Alan Buscaglia 71 Dec 27, 2022
Travel Website is a React application that uses React Hooks and React Router for this beginner React JS Project

Travel Website is a React application that uses React Hooks and React Router for this beginner React JS Project. The website is fully responsive as well.

Leticia Lumi Nagao 3 Aug 28, 2022
React Native APIs turned into React Hooks for use in functional React components

React Native Hooks React Native APIs turned into React Hooks allowing you to access asynchronous APIs directly in your functional components. Note: Yo

React Native Community 3k Jan 8, 2023
React-cache-api - React Cache API is a React Hooks library for data fetching

React Cache API React Cache API is a React Hooks library for data fetching. It w

awmaker 12 Aug 31, 2022
:tada: React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!

react-universal-hooks React Universal Hooks : just use****** everywhere. Support React >= 16.8.0 Installation Using npm: $ npm install --save react-un

Salvatore Ravidà 177 Oct 10, 2022
Lightweight React bindings for MobX based on React 16.8 and Hooks

mobx-react-lite ?? ?? ?? This repo has been moved to mobx This is a lighter version of mobx-react which supports React functional components only and

MobX 2.1k Dec 15, 2022
A delightful modal dialog component for React, built from the ground up to support React Hooks.

?? modali A delightful modal dialog library for React, built from the ground up to support React Hooks. Modali provides a simple interface to build be

Upmostly 205 Nov 23, 2022
React Redux binding with React Hooks and Proxy

There are several projects related to this repo. Here's the index of those. reactive-react-redux v5-alpha (this repo): This has an experimental react-

Daishi Kato 504 Dec 30, 2022
📋 React Hooks for forms validation (Web + React Native)

Performant, flexible and extensible forms with easy to use validation. English | 繁中 | 简中 | 日本語 | 한국어 | Français | Italiano | Português | Español | Рус

React Hook Form 32.5k Jan 2, 2023
react-pirate React lifecycle and utilities hooks.

??‍☠️ React Pirate Hooks for React 16.7 and above. Arrrr. Installation With npm: npm install react-pirate With yarn: yarn add react-pirate Usage Uti

Octave Raimbault 53 Aug 31, 2022
Super Simple React Hooks for react-redux.

RRH What's this? Simple React Hooks of React Redux Dependencies You must install some dependent packages before use RHH. react redux Install npm npm i

Taketoshi Aono 13 Aug 26, 2019