Use Firestore in React with zero effort 🤘
- 🎶 Simple, easy to use API, get up & running in minutes
- 🚀 Fast, only fetches and re-renders data when needed
- 🤘 No clutter, no complex stores/providers/actions/reducers, just go
Because, React + Firestore + Mobx === ❤️
yarn add firestorter
Firestorter is compatible with MobX >= 4.x. If you want to use MobX 3.x, please use Firestorter 0.9.3 or lower.
Also install the mobx, mobx-react and firebase dependencies:
yarn add firebase mobx mobx-react
import firebase from 'firebase';
import 'firebase/firestore';
import {initFirestorter, Collection} from 'firestorter';
import {observer} from 'mobx-react';
// Initialize firebase app
firebase.initializeApp({...});
// Initialize `firestorter`
initFirestorter({firebase: firebase});
// Define collection
const todos = new Collection('todos');
// Wrap your Components with mobx's `observer` pattern
const Todos = observer(class Todos extends Component {
render() {
return <div>
{todos.docs.map((doc) => (
<TodoItem
key={doc.id}
doc={doc} />
))}
</div>;
}
});
const TodoItem = observer(({doc}) => {
const {finished, text} = doc.data;
return <div>
<input type='checkbox' checked={finished} />
<input type='text' value={text} />
</div>;
});
ReactDOM.render(<Todos />, document.getElementById('root'));That's it. Your Components will now render your firestore data and re-render when data in the back-end changes.
Firestorter makes integrating Firestore real-time data into React easy as pie. It does this by providing a simple API for accessing Collection and Document data, whilst taking away the burden of managing snapshot listeners, data-caching and efficiently updating your React components.
It does this by intelligently tracking whether a Collection or Document should be listening for real-time updates (onSnapshot events) or not. Whenever a Component renders a Collection or Document, firestorter enables real-time updates on that resource. And whenever a Component stops using the resource (e.g., component was unmounted), it stops listening for snapshot updates. This behavior really shines when multiple components are rendering collection/document data and it becomes more difficult to determine whether snapshot updates should be enabled or not.
- TodoApp (view) (source) (Playground on StackBlitz)
- API Reference
- Introduction to Firestorter
- Paths & References
- Adding, Updating & Deleting documents
- Using Collections and Documents with a store
- Using Queries
- Using Sub-collections
- Real-time updating modes (coming soon)
- Using Collection and Document inside a Component (coming soon)
- Why you should create a component per document (coming soon)
Hi ✋, and thanks for visiting this project in its early stages. Firestorter is being built as you read this. The API is pretty stable, but more testing and documentation is still needed. Let me know if you run into problems or have requests 🤘
- Collection class
- Document class
- Adding documents
- Updating documents
- Deleting documents
- Queries
- Changing of ref/path in Collection
- Smart enable/disable real-time fetching based on whether collection is rendered
- Real-time fetching (onSnapshot) always enabled mode
- Manual fetching mode
- Fetching property to indicate loading state
- Per document fetching
- Per document real time updates
- Document Schemas (using superstruct)
- Custom Document classes
- Ability to set Document path, based on contents of another document
- Document.set
- Document.ready (Promise to check whether data is available)
- Collection.ready (Promise to check whether docs are available)
- Ability to set Collection path, based on contents of a document
- Ability to set reactive query on Collection
- FieldPath notation for Document.update
- Collection pagination (in progress)
- Sub-collections howto
- Revise Collection.add
- Delete all documents in a collection or query
- Blobs
- GeoPoint ?
- Batch updates
- More documentation / articles
- Thanks to all sponsors supporting this project
- Logo design by Alex Prodrom