Firestorter

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.