react-hooks-firebase-v9 v0.2.4
React-hooks-firebase-v9
Installation
Use npm to install react-hooks-firebase-v9
npm install react-hooks-firebase-v9
Update v0.2.3
- Add Timestamp from firebase
import { Timestamp, serverTimestamp } from 'react-hooks-firebase-v9'
- Add where queryPagination
queryPagination({
collection,
pagination: {
limit: 100,
page: 1,
orderBy: [["age", "desc"]],
where: [["age", ">=", 20]] //new feature
},
onCompleted(data) {
console.log(mapToDocumentData(data.docs));
},
onError(error) {
alert(error.message);
},
});
Update new feature v0.2.0
useAuth: update signin apple, microsoft for signInWithProvider.
const { data, error } = await signInWithProviderAsync(
auth,
"google", /* google | github | facebook | twitter | apple | microsoft */
"popup" /* popup or redirect */
);
useFireStore: change syntax where, orderBy in queryDoc
//old
where: [{ fieldPath: "age", opStr: ">=", value: 22 }]
//new
where: [["age", ">=", 22]]
//old
orderBy: { fieldPath: "age", directionStr: "desc"}
//new
orderBy: [["age", "desc"]]
useFireStore: update limitToLast, startAt, startAfter, endAt, endBefore in queryDoc
query({
collection,
constraints: {
where: [["age", ">=", 22]], //WhereType[]
orderBy: [["age", "desc"]], //OrderByType[]
limit: 1, // number
limitToLast: 3, //number,
startAt: [1], //DocumentSnapshot<unknown> | unknown[]
startAfter: [1], //DocumentSnapshot<unknown> | unknown[]
endAt: [1], //DocumentSnapshot<unknown> | unknown[]
endBefore: [1], //DocumentSnapshot<unknown> | unknown[]
},
});
useFireStore: update funtion convertToDocumentData(), mapToDocumentData()
import { useFireStore } from "react-hooks-firebase-v9";
interface Person {
name: string;
age: number;
}
const { createDocRef, getDocAsync, createCollection, queryDocAsync,
mapToDocumentData, convertToDocumentData } = useFireStore()
//convertToDocumentData: when use getDoc return one doc
const doc = createDocRef("persons", "p1");
const {data: snapshot, error} = await getDocAsync(doc);
const person = convertToDocumentData<Person>(person);
//mapToDocumentData: when use queryDoc return array docs
const collection = createCollection("persons");
const {data: querySnapshot, error} = await queryDocAsync(collection, {
orderBy: [["age", "desc"]],
limit: 2
});
const persons = mapToDocumentData<Person>(querySnapshot.docs);
useFireStore: update feature queryPagination use query with pagination
import { useFireStore } from "react-hooks-firebase-v9";
/* use with callback */
const { createCollection, queryPaginationCallback, mapToDocumentData } = useFireStore();
const [queryPagination, { loading }] = queryPaginationCallback();
const onQueryHandler = () => {
const collection = createCollection("persons");
queryPagination({
collection,
pagination: {
limit: 2,
orderBy: [["age", "desc"]],
page: 1,
},
onCompleted(data) {
console.log(mapToDocumentData(data.docs));
},
onError(error) {
alert(error.message);
},
});
}
/* use with async */
const { createCollection, queryPaginationAsync, mapToDocumentData } = useFireStore();
const onQueryHandler = () => {
const collection = createCollection("persons");
const { error, data } = await queryPaginationAsync(collection, {
limit: 2,
orderBy: [["age", "desc"]],
page: 3,
});
if(error) {
alert(error);
}
console.log(mapToDocumentData(data!.docs));
}
Usage
index.tsx
import { FirebaseProvider, createApp } from "react-hooks-firebase-v9";
const app = createApp({
apiKey: process.env.REACT_APP_API_KEY,
authDomain: process.env.REACT_APP_AUTH_DOMAIN,
projectId: process.env.REACT_APP_PROJECT_ID,
storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_APP_ID,
measurementId: process.env.REACT_APP_MEASUREMENT_ID,
});
<FirebaseProvider app={app}>
<App />
</FirebaseProvider>;
Hooks
useAuth(): use auth in firebase
useFireStore(): use cloud firestore in firebase
useStorage(): use stoorage in firebase
useTransaction(): group auth, firestore, storage in one transaction handle many async on time
useDatabase: update later
useAuth()
createUserWithEAP: create user with email and password
import { useAuth } from "react-hooks-firebase-v9";
/* use with callback */
const { createUserWithEAPCallback } = useAuth();
const [createUser, { loading, data, error }] = createUserWithEAPCallback();
console.log(data);
console.log(error);
console.log(loading);
const onClickHandler = () => {
createUser({
value: {
email: "exmaple@gmail.com",
password: "123456",
},
onCompleted(data) {
console.log(data);
},
onError(error) {
alert(error);
},
});
};
/* use with async */
const { auth, createUserWithEAPAsync } = useAuth();
const onClickHandler = async () => {
const { data, error } = await createUserWithEAPAsync(
auth,
"example@gmail.com",,
"123456"
);
if (error) {
alert(error);
}
console.log(data);
};
signInWithEAP: signin with email and password
import { useAuth } from "react-hooks-firebase-v9";
/* use with callback */
const { signInWithEAPCallback } = useAuth();
const [signIn, { loading, data, error }] = signInWithEAPCallback();
console.log(data);
console.log(error);
console.log(loading);
const onClickHandler = () => {
signIn({
value: {
email: "example@gmail.com",
password: "123456",
},
onCompleted(data) {
console.log(data);
},
onError(error) {
alert(error);
},
});
};
/* use with async */
const { auth, signInWithEAPAsync } = useAuth();
const onClickHandler = async () => {
const { data, error } = await signInWithEAPAsync(
auth,
"example@gmail.com",
"123456"
);
if (error) {
alert(error);
}
console.log(data);
};
signInWithProvider: signin with provider google, github,...
import { useAuth } from "react-hooks-firebase-v9";
/* use with callback */
same other callback in useAuth
/* use with async */
const { auth, signInWithProviderAsync } = useAuth();
const onClickHandler = async () => {
const { data, error } = await signInWithProviderAsync(
auth,
"google", /* google | github | facebook | twitter | apple | microsoft */
"popup" /* popup or redirect */
);
if (error) {
alert(error);
}
console.log(data);
};
getAuth: get user login
import { useAuth } from "react-hooks-firebase-v9";
/* use with callback */
same other callback in useAuth
/* use with async */
const { auth, getAuthAsync } = useAuth();
useEffect(() => {
const get = async () => {
const { data, error } = await getAuthAsync(auth);
if (error) {
alert(error);
}
console.log(data);
};
get();
}, []);
signOut
import { useAuth } from "react-hooks-firebase-v9";
/* use with callback */
const { signOutCallback } = useAuth();
const [signOut, { loading, data, error }] = signOutCallback();
console.log(data);
console.log(error);
console.log(loading);
const onClickHandler = () => {
signOut({
onCompleted() {
alert("success");
},
onError(error) {
alert(error);
},
});
};
/* use with async */
same other async in useAuth
*sendEmailVerification: send link verifired mail
*sendPasswordResetEmail: send link reset password
*updateProfileAsync: update displayName or photoUrl
useFireStore()
addDoc: add new doc
import { useFireStore } from "react-hooks-firebase-v9";
/* use with callback */
const { addDocCallback, createCollection } = useFireStore();
const [addDoc, { loading, data, error }] = addDocCallback();
console.log(data);
console.log(error);
console.log(loading);
const onClickHandler = () => {
const collection = createCollection("test");
addDoc({
collection,
value: {
title: "test",
content: "test content",
},
onCompleted(data) {
console.log(data);
},
onError(error) {
alert(error);
},
});
};
/* use with async */
const { addDocAsync, createCollection } = useFireStore();
const onClickHandler = async () => {
const collection = createCollection("test");
const { data, error } = await addDocAsync(collection, {
title: "test1",
content: "test content",
});
if (error) {
alert(error);
}
console.log(data);
};
setDoc: add new doc if not exist or update doc if exist
import { useFireStore } from "react-hooks-firebase-v9";
/* use with callback */
same other callback in useFireStore
/* use with async */
const { setDocAsync, createDocRef } = useFireStore();
const onClickHandler = async () => {
const doc = createDocRef("test", "testdoc");
const { data, error } = await setDocAsync(doc, {
title: "test2",
content: "test content",
});
if (error) {
alert(error);
}
console.log(data);
};
getDoc: get one doc
import { useFireStore } from "react-hooks-firebase-v9";
/* use with callback */
same other callback in useFireStore
/* use with async */
const { getDocAsync, createDocRef } = useFireStore();
const onClickHandler = async () => {
const doc = createDocRef("test", "testdoc");
const { data, error } = await getDocAsync(doc);
if (error) {
alert(error);
}
console.log(data?.data());
};
queryDoc: query docs
import { useFireStore } from "react-hooks-firebase-v9";
/* use with callback */
same other callback in useFireStore
/* use with async */
const { queryDocAsync, createCollection } = useFireStore();
const onClickHandler = async () => {
const collection = createCollection("persons");
const { data: docs, error } = await queryDocAsync(collection, {
where: [["age", ">=", 22 ]],
limit: 2
});
if (error) {
alert(error);
}
console.log(docs);
};
queryPagination: use query with pagination
import { useFireStore } from "react-hooks-firebase-v9";
/* use with callback */
const { createCollection, queryPaginationCallback, mapToDocumentData } = useFireStore();
const [queryPagination, { loading }] = queryPaginationCallback();
const onQueryHandler = () => {
const collection = createCollection("persons");
queryPagination({
collection,
pagination: {
limit: 2,
orderBy: [["age", "desc"]],
page: 1,
},
onCompleted(data) {
console.log(mapToDocumentData(data.docs));
},
onError(error) {
alert(error.message);
},
});
}
/* use with async */
const { createCollection, queryPaginationAsync, mapToDocumentData } = useFireStore();
const onQueryHandler = () => {
const collection = createCollection("persons");
const { error, data } = await queryPaginationAsync(collection, {
limit: 2,
orderBy: [["age", "desc"]],
page: 3,
});
if(error) {
alert(error);
}
console.log(mapToDocumentData(data!.docs));
}
*updateDoc: update doc
*deleteDoc: delete doc
useStorage()
uploadFile: only uploadFile have progess, pause, resume, cancel.
import { useStorage } from "react-hooks-firebase-v9";
const [file, setFile] = useState<any>(null);
const { uploadFileCallback, createStorageRef } = useStorage();
const [uploadFile, { loading, data, error, progress, pause, resume, cancel }] =
uploadFileCallback();
const handleChange = (f: any) => {
setFile(f);
};
console.log(data);
console.log(error);
console.log(loading);
console.log(progress); // update progress
const onPause = () => pause!(); // update pause
const onResume = () => resume!(); // update resume
const cancel = () => cancel!(); // update cancel
const onClickHandler = () => {
const ref = createStorageRef("images/" + file.name);
uploadFile({
ref,
file,
onCompleted(url) {
console.log(url);
},
onError(error) {
alert(error);
},
});
};
*downloadUrl: get url file
*deleteFile: delete one file
*deleteManyFile: delete many file
*listFile: list files
useTransaction()
use transaction run many async in one transaction
import { useTransaction } from "react-hooks-firebase-v9";
const {
onTransactionCallback,
auth: a,
createDocRef,
} = useTransaction();
const [onTransaction, { loading, error }] = onTransactionCallback();
console.log(error);
console.log(loading);
const onClickHandler = async () => {
onTransaction({
async onRun({ auth, firestore, storage }) {
const user = await auth.signInWithProvider(a, "google", "popup");
const doc = createDocRef("users", user.uid);
await firestore.setDoc(doc, {
displayName: user.displayName,
photoUrl: user.photoURL,
});
},
onError(error) {
alert(error);
},
});
};
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.