@garfdev/react-firebase NPM

REACT-FIREBASE

A simple react library to interage your application with firebase.

This repository contains:

Firebase wrapper to initialize firebase and provide it though application.
useFirebase hook to get firebase instance where needed

If you have any suggestion, request of error, please kindy create an issues on react-firebase github repository.

Install
Quick start
Contributing
License

Install

This project uses node and npm. Go check them out if you don't have them locally installed.

$ npm i @garfdev/react-firebase

$ yarn add @garfdev/react-firebase

Quickstart

In this state setting up is dead simple. First is create a FirebaseConfig.ts file:

const FirebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.FIREBASE_DATABASE_URL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.FIREBASE_APP_ID,
  measurementId: process.env.FIREBASE_MEASUREMENT_ID,
};

export default FirebaseConfig;

Then wrap <Firebase /> with previous FirebaseConfig around your <App /> component:

  <React.StrictMode>
    <Firebase config={FirebaseConfig} name="your_firebase_name">
      <App />
    </Firebase>
  </React.StrictMode>,

In component, simply use useFirebase hook:

function App() {
  const firebase = useFirebase();
  console.log(firebase);
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

A full demo project can found in react-firebase-demo.