Firestore React
React components to handle Google Firebase Firstore database.
What's in the box?
There are 3 components that are our building blocks to consume and modify your data stored in Firestore.
FirestoreProvider
Wrap your app with this component, supply it with your firebase config and you're ready to start pulling data.
FirstoreCollection
The component which would pull docs within a given collection.
FirestoreDocument
The component which would pull a specific document.
Models
To work with either the <FirestoreCollection /> or <FirestoreDocument /> components, you'd also need to define the model representing your collection/document. To do so you need to simply extend the DocumentModel and CollectionModel classes to your collections and documents' structures,
A simple document model
type MyDocType = { name: string; value?: number };
export class MyDocModel extends DocumentModel<MyDocType> {
path = 'users';
}
This tells us that the path of this document type is users/ and that its type includes a name (string) and a price (optional number).
A document model with default values
type MyDocType = { name: string; value?: number };
export class MyDocModel extends DocumentModel<MyDocType> {
path = 'users';
defaults = {
name: 'unknown',
price: 0
}
}
The defaults prop is used to fallback each field in the retrieved document, to its responsive default value, in case the field is undefined.