While Firebase is a great way to abstract backend interaction for all devs, I believe it could benefit from some hooks love.
Another reason why I'm writing this project is to make firebase as accessible to new users as I can. I recently had pretty bad experience with explaining configuration, organization and usage to few new Web Devs and I believe there is too much that is not explained in the docs explicitly, so I might as well attempt to abstract it with custom hooks.
// Add these to index.js
import { FirebaseContextCreate } from 'firebase-hooks'; // todo come up with name
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
const Firebase = FirebaseContextCreate(
{
apiKey: 'api-key',
authDomain: 'project-id.firebaseapp.com',
databaseURL: 'https://project-id.firebaseio.com',
projectId: 'project-id',
storageBucket: 'project-id.appspot.com',
messagingSenderId: 'sender-id',
appId: 'app-id',
measurementId: 'G-measurement-id',
},
//add only what you need to this array
['firestore', 'auth', 'database', 'storage'],
);
ReactDOM.render(
<Firebase>
<App />
</Firebase>
document.getElementById('root'),
);There are two main groups of operations: Global search and User search. They are basically the same, but the User Search is only searching data related to current user.
For now these two types work the same, but in the path variable, passed into a hook you have the ability to pass a string called __user (ex: __user/posts) which will be parsed by a hook and will input currently logged in user's id.
Note this variable is subject to change and will be defined in one place.
useAuth hook expects a string of signup method user wants to use and an optional callback function, useful for redirects.
Hook returns always an array of loading, error and data, where data is information available from each method. In that object there are handlers for onChange or onSubmit and other abstractions so you dont have to worry about handling inputs at all. Details about each method present in auth docs.
useR hook is a hook that returns information about the user and if hes being loaded in.