# @jameslnewell/react-firebase

> 🎣 React hooks for working with firebase.

Latest version **0.12.0-preview.3** (published 2021-02-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @jameslnewell/react-firebase
pnpm add @jameslnewell/react-firebase
yarn add @jameslnewell/react-firebase
bun add @jameslnewell/react-firebase
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.12.0-preview.3 |
| Published | 2021-02-18 |
| First published | 2018-11-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 35.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | jameslnewell |
| Keywords | firebase, react, hooks, firestore, auth, storage, google |

## Links

- npm: https://www.npmjs.com/package/@jameslnewell/react-firebase
- Repository: https://github.com/jameslnewell/react
- Homepage: https://github.com/jameslnewell/react#readme
- Issues: https://github.com/jameslnewell/react/issues
- npm.io page: https://npm.io/package/@jameslnewell/react-firebase

## Dependencies (3)

- [@jameslnewell/observable](https://npm.io/package/@jameslnewell/observable.md) ^1.5.0
- [@jameslnewell/react-promise](https://npm.io/package/@jameslnewell/react-promise.md) ^4.0.0-preview.2
- [@jameslnewell/react-observable](https://npm.io/package/@jameslnewell/react-observable.md) ^3.0.0-preview.2

## Alternatives

- [@clerk/clerk-expo](https://npm.io/package/@clerk/clerk-expo.md) — 133.6K weekly downloads
- [@pothos/plugin-authz](https://npm.io/package/@pothos/plugin-authz.md) — 12.4K weekly downloads
- [@bounded-sh/client](https://npm.io/package/@bounded-sh/client.md) — 3.2K weekly downloads
- [@luigi-project/plugin-auth-oauth2](https://npm.io/package/@luigi-project/plugin-auth-oauth2.md) — 2.3K weekly downloads
- [@nocobase/plugin-verification](https://npm.io/package/@nocobase/plugin-verification.md) — 2.0K weekly downloads

## Recent versions

- 0.12.0-preview.3 (latest) — 2021-02-18
- 0.13.0-preview.3 (next) — 2021-07-31
- 0.12.0-preview.2 (preview) — 2021-02-18
- 0.13.0-preview.2 — 2021-07-30
- 0.13.0-preview.1 — 2021-07-28
- 0.12.0-preview.16 — 2021-05-27
- 0.12.0-preview.14 — 2021-03-03
- 0.12.0-preview.13 — 2021-03-03
- 0.12.0-preview.12 — 2021-02-22
- 0.12.0-preview.11 — 2021-02-20
- 0.12.0-preview.10 — 2021-02-20
- 0.12.0-preview.9 — 2021-02-19
- 0.12.0-preview.8 — 2021-02-19
- 0.12.0-preview.7 — 2021-02-19
- 0.12.0-preview.6 — 2021-02-19
- … 22 more at https://npm.io/package/@jameslnewell/react-firebase/versions

## README

# @jameslnewell/react-firebase

![npm (scoped)](https://img.shields.io/npm/v/@jameslnewell/react-firebase.svg)
[![Bundle Size](https://badgen.net/bundlephobia/minzip/@jameslnewell/react-firebase)](https://bundlephobia.com/result?p=@jameslnewell/react-firebase)
[![Actions Status](https://github.com/jameslnewell/react/workflows/main/badge.svg)](https://github.com/jameslnewell/react/actions)

🎣 React hooks for working with firebase.

## Installation

NPM:

```bash
npm install @jameslnewell/react-firebase
```

Yarn:

```bash
yarn add @jameslnewell/react-firebase
```

## Usage

`index.js`

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

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

```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')}
        </>
      );
  }
};
```

## API

### app

#### &lt;AppProvider&gt;

#### useApp()

### auth

#### useStatus()

#### useUser()

#### useSignInWithPopup()

#### useSignOut()

### firestore

#### useCollection()

#### useDocument()

#### useCreateDocument()

#### useUpdateDocument()

#### useSetDocument()

#### useDeleteDocument()

#### &lt;Collection&gt;

#### &lt;Document&gt;

### storage

---
_Source: https://npm.io/package/@jameslnewell/react-firebase · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._