Skip to content

Use Firestore in React with zero effort, using MobX 🤘

License

Notifications You must be signed in to change notification settings

damonmaria/firestorter

 
 

Repository files navigation


Firestorter

NPM version Build Status codecov MIT licensed code style: prettier Release Notes Donate

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

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.

Examples

Documentation

License

MIT

Acknowledgements

  • Big thanks to all sponsors and contributors supporting this project 🤘
  • Logo design by Alex Prodrom

About

Use Firestore in React with zero effort, using MobX 🤘

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 71.4%
  • JavaScript 28.5%
  • Shell 0.1%