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)
- Introduction to Firestorter
- TypeScript support 👌
- react-native support
- Paths & References
- Adding, Updating & Deleting documents
- Using Queries
- Schemas & Custom documents
- Using Collections and Documents with a store
- Using Sub-collections
- API Reference
- Big thanks to all sponsors and contributors supporting this project 🤘
- Logo design by Alex Prodrom