Firestorter NPM

GeoQuery & AggregateCollection todos

AggregateCollection class
- Base implementation
- `toString'
- debugName
- ICollection interface which is shared with Collection
- optional createDocument
GeoQuery class
GeoQuery documentation
Geo-hashing functions
Geo-hashing functions documentation
Docs for AggregateCollection
Tests for AggregateCollection
Tests for GeoQuery
Tests for Geo-functions
Medium article

Nice to have:

AggregateCollection class, manual fetch support
- mode support
- fetch support
- ready function
Better documentation structure, iso 1 large MD file (like latest mobx?)

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 === ❤️

this-thing-really-moves

Index

GeoQuery & AggregateCollection todos

Installation

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

Usage

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.

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.