use-firebase

A React hook for importing firebase dynamically.

The problem

Firebase is huge.

Us web developers want speedy performance, so we use code-splitting to make firebase be loaded in after the main part of the appliaction. Lazy-loading the firebase module is the solution, but it is a bit tricky to implement without being extremely verbose.

The solution

The use-firebase package allows you to lazy-load firebase without the code being ugly.

Example

import React from 'react'
import useFirebase from 'use-firebase'

var firebaseConfig = {
  apiKey: 'AIzaSyDOCAbC123dEf456GhI789jKl01-MnO',
  // ...
}

export default () => {
  const firebase = useFirebase(firebaseConfig)
  const [data, setData] = React.useState(null)

  // Get data on mount
  React.useEffect(() => {
    if (firebase) {
      firebase
        .firestore()
        .doc('a/document')
        .get()
        .then((res) => {
          setData(res)
        })
    }
  }, [])

  return <div>{data ? JSON.stringify(data) : <p>Loading</p>}</div>
}

Installation

npm install --save @penguoir/use-firebase

Api

Typedefs

FirebaseConfig : Object

Kind: global typedef
Properties

| Name | Type | | ----------------- | ------------------- | | apiKey | string | | authDomain | string | | databaseURL | string | | projectId | string | | storageBucket | string | | messagingSenderId | string | | appId | string | | measurementId | string |

callback : function

Callback function for when firebase is initialized

Kind: global typedef

| Param | Type | Description | | ----------- | ----------------------------- | --------------------------------------------------------------------------------------------- | | FirebaseApp | firebase.app.App | The firebase app, no need to .initializeApp() here! Just use this if you want custom settings |

callback ⇒ firebase.app.App | null

useFirebase - Load firebase with a hook

Kind: global typedef
Returns: firebase.app.App | null - Firebase app OR NULL (when loading)

| Param | Type | Description | | -------------- | ---------------------------------------------- | --------------- | | FirebaseConfig | FirebaseConfig | Firebase config |

Example

const firebase = useFirebase({ appid: whatever })

// ... later, e.g. in a component ...
React.useEffect(() => {
  if (firebase) {
    firebase
      .firestore()
      .doc('a/doc')
      .get()
      .then((res) => set)
  }
}, [])