Awesome
<!-- prettier-ignore --> <h1 align="center"> <img src="./docs/_media/logo.jpg" /><br> Firestorter </h1><span class="badge-npmversion"><a href="https://www.npmjs.com/package/firestorter" title="View this project on NPM"><img src="https://img.shields.io/npm/v/firestorter.svg" alt="NPM version" /></a></span>
Use Google Firestore in React with zero effort, using MobX 🤘
- 🎶 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
The latest version is compatible with the Firebase v9 API.
yarn add firestorter
1. Initialize
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { initFirestorter } from 'firestorter';
import makeWebContext from 'firestorter/web';
// Initialize firebase app
const app = initializeApp({ ... });
const firestore = getFirestore(app);
// Initialize `firestorter`
initFirestorter(makeWebContext({ firestore }));
See here on how to use with react-native, compat mode and older firebase SDKs.
2. Create a Collection
or Document
import { Collection, Document } from 'firestorter';
const todos = new Collection('todos');
const user = new Document('users/8273872***');
3. Wrap your Components with mobx's observer
pattern
import * as React from 'react';
import { observer } from 'mobx-react';
const Todos = observer(() => {
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>;
});
That's it. Your Components will now render your firestore data and re-render when data in the back-end changes.
How it works
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.
Features
- Add, update & delete documents
- Super efficient Component re-rendering
- Declaratively link document/collection paths to document data
- Geo query support
- Easily create aggregate collections from multiple queries
- Runtime schema validation & Type Generics
- Manual fetching mode for use with Unit-tests/Async-functions
- React-native support
- TypeScript- & Flow typings
- Works with Vue.js
Want to learn more, head over to firestorter.com 🤘