https://github.com/muhdhanish/firebase-integration
This is a simple guide for basic crud in firebase using React js.
https://github.com/muhdhanish/firebase-integration
context-api css firebase javascript reactjs
Last synced: 3 months ago
JSON representation
This is a simple guide for basic crud in firebase using React js.
- Host: GitHub
- URL: https://github.com/muhdhanish/firebase-integration
- Owner: MuhdHanish
- Created: 2023-05-16T15:47:13.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-03-15T14:40:31.000Z (over 2 years ago)
- Last Synced: 2025-01-30T13:13:16.011Z (over 1 year ago)
- Topics: context-api, css, firebase, javascript, reactjs
- Language: JavaScript
- Homepage:
- Size: 181 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Firebase Integration with React
This repository serves as a demonstration of how to integrate Firebase with React using the latest version of Firebase. It includes a utility function useFirestoreCollection that facilitates interactions with Firestore collections.
### Step 1: Clone the repository
```bash
git clone https://github.com/MuhdHanish/Firebase-integration.git
```
### Step 2: Install dependencies
```bash
npm install
```
### Step 3: Set up Firebase
- Create a Firebase project in the Firebase Console.
- Obtain your Firebase configuration object.
- Add the Firebase configuration object to src/firebase/config.js.
# Usage
```javascript
import {
collection,
getDocs,
addDoc,
updateDoc,
doc,
getDoc,
deleteDoc,
} from "firebase/firestore";
import db from "./firebase/config";
export function useFirestoreCollection(collectionName) {
// Initialize collection reference
const collectionRef = collection(db, collectionName);
// Get all documents from the collection
const getDocuments = async () => {
const data = await getDocs(collectionRef);
return data.docs.map((doc) => ({ ...doc.data(), id: doc.id }));
};
// Add a document to the collection
const addDocument = async (data) => {
try {
await addDoc(collectionRef, data);
} catch (error) {
console.error("Error adding document:", error);
}
};
// Update a document in the collection
const updateDocument = async (documentId) => {
const documentRef = doc(db, collectionName, documentId);
const documentSnap = await getDoc(documentRef);
const data = {
age: documentSnap.data().age + 1,
};
if (documentSnap.exists()) {
await updateDoc(documentRef, data);
}
};
// Delete a document from the collection
const deleteDocument = async (documentId) => {
await deleteDoc(doc(db, collectionName, documentId));
};
return { getDocuments, addDocument, updateDocument, deleteDocument };
}
```
# Contributing
Contributions are welcome! If you find any issues or have suggestions for improvements, feel free to open an issue or create a pull request.