# @acorcutt/firestarter

> React firebase components for getting up and running quickly.

Latest version **0.0.19** (published 2022-11-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install @acorcutt/firestarter
pnpm add @acorcutt/firestarter
yarn add @acorcutt/firestarter
bun add @acorcutt/firestarter
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.19 |
| Published | 2022-11-23 |
| First published | 2022-06-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 14 |
| Dependencies | 5 |
| Unpacked size | 121 KB |
| Known vulnerabilities | 0 (+15 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Anthony Corcutt |
| Maintainers | acorcutt |
| Keywords | react, firebase, nextjs |

## Links

- npm: https://www.npmjs.com/package/@acorcutt/firestarter
- Repository: https://github.com/acorcutt/firestarter
- Issues: https://github.com/acorcutt/firestarter/issues
- npm.io page: https://npm.io/package/@acorcutt/firestarter

## Dependencies (5)

- [next](https://npm.io/package/next.md) ^12.3.4
- [react](https://npm.io/package/react.md) ^18.2.0
- [firebase](https://npm.io/package/firebase.md) ^9.14.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [react-hook-form](https://npm.io/package/react-hook-form.md) ^7.39.5

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.19 (latest) — 2022-11-23
- 0.0.18 — 2022-07-21
- 0.0.17 — 2022-06-18
- 0.0.16 — 2022-06-15
- 0.0.15 — 2022-06-13
- 0.0.14 — 2022-06-13
- 0.0.13 — 2022-06-13
- 0.0.12 — 2022-06-12
- 0.0.11 — 2022-06-12
- 0.0.10 — 2022-06-12
- 0.0.9 — 2022-06-12
- 0.0.8 — 2022-06-12
- 0.0.7 — 2022-06-10
- 0.0.6 — 2022-06-10
- 0.0.5 — 2022-06-10
- … 4 more at https://npm.io/package/@acorcutt/firestarter/versions

## README

#### ⚠️ Work-in-Progress

---

# Firestarter 🔥

React components, hooks and other helpers I use to quickly get started with next and firebase.

![alt text](public/firestarter.gif)

## Features

- Firebase Auth Connector
- Login with email link
- Firestore Connector
- Snapshot Hooks
- Local Store

## Install

```
pnpm add @acorcutt/firestarter
```

```
yarn add @acorcutt/firestarter
```

```
npm i @acorcutt/firestarter
```

## Usage

#### Setup providers with your firebaseConfig and optional emulator settings:

```js
import type { AppProps } from 'next/app';
import Firestarter, { getFirebase } from '@acorcutt/firestarter';

import config from '../firebase';
import settings from '../firebase.json';
import { getApp, initializeApp } from 'firebase/app';
import { connectFirestoreEmulator, getFirestore } from 'firebase/firestore';
import { connectAuthEmulator, getAuth } from 'firebase/auth';
import { getFunctions, connectFunctionsEmulator } from 'firebase/functions';
import { getStorage, connectStorageEmulator } from 'firebase/storage';
import { useRouter } from 'next/router';

// Set localStorage defaults
const defaultStore = {
  fire: true,
};

// Inject the firebase services you neeed
const services = {
  getApp,
  initializeApp,
  getFirestore,
  getAuth,
  getStorage,
  getFunctions,
  connectFirestoreEmulator,
  connectAuthEmulator,
  connectStorageEmulator,
  connectFunctionsEmulator,
};

// Initialize the firebase app with optional emulators
const firebase = getFirebase(config, services, !!process.env.NEXT_PUBLIC_FIREBASE_EMULATION && settings.emulators);

function MyApp({ Component, pageProps }: AppProps) {
  // Connect to next routing
  const router = useRouter();

  return (
    <Firestarter firebase={firebase} defaultStore={defaultStore} router={router}>
      <Component {...pageProps} />
    </Firestarter>
  );
}

export default MyApp;
```

#### See included `/pages` folder for examples.

## Develop

To run the development app setup your `.firebaserc` and `.env.local` from your firebase project settings.

`.firebaserc`

```json
{
  "projects": {
    "default": "<your-project-name>"
  }
}
```

`.env.local`

Copy from your firebase project settings:

```env
NEXT_PUBLIC_FIREBASE_API=<apiKey>
NEXT_PUBLIC_FIREBASE_AUTH=<authDomain>
NEXT_PUBLIC_FIREBASE_PROJECT=<projectId>
NEXT_PUBLIC_FIREBASE_STORAGE=<storageBucket>
NEXT_PUBLIC_FIREBASE_MESSAGING=<messagingSenderId>
NEXT_PUBLIC_FIREBASE_APP=<appId>
```

To enable emulation:

```
NEXT_PUBLIC_FIREBASE_EMULATION=true
```

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