@qonsoll/firebase-services

Service functions for Firebase

Usage no npm install needed!

<script type="module">
  import qonsollFirebaseServices from 'https://cdn.skypack.dev/@qonsoll/firebase-services';
</script>

README

Firebase services

A set of reusable services functions for Firebase.

NPM npm bundle size JavaScript Style Guide

Install

@qonsoll/firebase-services requires React 16.8.0 or later and Firebase 8.8.0 <= version < 9.

Install dependencies

# with npm
npm install --save firebase lodash

# with yarn
yarn add firebase lodash

Install library

# with npm
npm install @qonsoll/firebase-services

# with yarn
yarn add @qonsoll/firebase-services

Usage

  1. First you need to create function that will initialize firebase app in your project
import firebase from 'firebase/app'
//Also here you can insert all nessesary firebase imports.
import 'firebase/auth'
import 'firebase/storage'
import 'firebase/database'
import 'firebase/firestore'

// Config and init firebase application.
export const initFirebaseApp = () => {
    const firebaseConfig = {
        apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
        authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
        databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
        projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
        storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
        messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
        appId: process.env.REACT_APP_FIREBASE_APP_ID
    }
    if (!firebase.apps.length) {
        firebase.initializeApp(firebaseConfig)
    } else {
        firebase.app()
    }
}
  1. In your index.js file import previous function and call it.
//
// ...imports
//
import { initFirebaseApp } from './config/firebase'

// Initialize firebase application.
initFirebaseApp()

const App = () => (
  {/* Components */}
)
  1. After you initialized firebase app, you should add component which will provide firebase object for library.
import firebase from 'firebase/app'
// Use default import to name it as you want.
import FBSProvider from '@qonsoll/firebase-services'
// or use named import.
// import { FirebaseServicesProvider } from '@qonsoll/firebase-services'
import { initFirebaseApp } from './config/firebase'

// Initialize firebase application.
initFirebaseApp()

const App = () => ( 
  <FBSProvider firebase={firebase}>
    {/* Components */}
  </FBSProvider>
)

Next step is read documentation about functions you needs.

Documentation