REACT-FIREBASE

A simple react library to interage your application with firebase.

This repository contains:

1. Firebase wrapper to initialize firebase and provide it though application.
2. 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.

Table of Contents

• 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.

Contributing

Feel free to dive in! Open an issue or submit PRs.

Standard Readme follows the Contributor Covenant Code of Conduct.

License

MIT © GarfDev