@use-firebase/app

A custom React Hook that provides a declarative interface for Firebase.

Usage no npm install needed!

<script type="module">
  import useFirebaseApp from 'https://cdn.skypack.dev/@use-firebase/app';
</script>

README

@use-firebase/app

A custom React Hook that impliments Firebase's App object.

npm version All Contributors

Installation

$ npm i @use-firebase/app

or

$ yarn add @use-firebase/app

API

You must first import the package like so.

import { FirebaseAppProvider, useFirebaseApp } from '@use-firebase/app';

FirebaseAppProvider

Return a Firebase application provider. You must wrap your app inside of an <FirebaseAppProvider/>.

<FirebaseAppProvider config={myFirebaseConfig} name="myFirebase">
  <App />
</FirebaseAppProvider>

Props

Here are the parameters that you can use.

Parameter Description
config A configuration object. See below for instructions on how to obtain this from the Firebase console.
name An optional name for your app. Default = [DEFAULT].
Obtaining config information from the Firebase console
  1. Go to your project page on the Firebase console.
  2. Next to Project Overview you should see a gear icon.
  3. Click it and select Project settings from the menu.
  4. On the General tab, you should see a Your apps section.
  5. Click on the web icon (i.e. </>)
  6. Copy just the var config information and not any of the HTML tags. It should look somthing like this.
var config = {
  apiKey: 'AIzaSy7IGdsxh_8XNxKn6H4d9yKBH5qnD_B2xbs',
  authDomain: 'my-app-87543.firebaseapp.com',
  databaseURL: 'https://my-app-87543.firebaseio.com',
  projectId: 'my-app-87543',
  storageBucket: 'my-app-87543.appspot.com',
  messagingSenderId: '423450585517',
};

useFirebaseApp

const app = useFirebaseApp();

useFirebaseApp is a custom hook that you can use in your components to obtain the app object created by FirebaseAppProvider.

Live demo

TODO

License

MIT Licensed