@jameslnewell/react-firebase NPM

@jameslnewell/react-firebase

npm (scoped)

🎣 React hooks for working with firebase.

Installation

NPM:

npm install @jameslnewell/react-firebase

Yarn:

yarn add @jameslnewell/react-firebase

Usage

index.js

import firebase from 'firebase';
import 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import React from 'react';
import ReactDOM from 'react-dom';
import {AppProvider} from '@jameslnewell/react-firebase';
import {App} from './App';

const app = firebase.initializeApp({
  /* your firebase config */
});

ReactDOM.render(
  <AppProvider app={app}>
    <App />
  </AppProvider>,
  document.getElementById('app'),
);

Navbar.js

import React from 'react';
import firebase from 'firebase';
import {useUser, useSignInWithPopup useSignOut} from '@jameslnewell/react-firebase/auth';

export const Navbar = () => {
  const {isAuthenticated} = useStatus();
  const {invoke: signIn} = useSignInWithPopup();
  const {invoke: signOut} = useSignOut();

  const handleSignInOrOut = () => {
    if (isAuthenticated) {
      signOut();
    } else {
      signIn(new firebase.auth.GoogleAuthProvider());
    }
  };

  return (
    <nav>
      <button onClick={handleSignInOrOut}>{isAuthenticated ? 'Sign out' : Sign in}</button>
    </nav>
  );
}

UserProfile.js

import React from 'react';
import {useDocument} from '@jameslnewell/react-firebase/firestore';

export const UserProfile = ({userId}) => {
  const [user, {status}] = useDocument(`users/${userId}`);
  switch (status) {
    case 'receiving':
      return 'Loading...';
    case 'errored':
      return 'Unable to fetch profile for user';
    default:
      return (
        <>
          {user && user.id}
          {user && user.get('name')}
        </>
      );
  }
};