Nondeterministic Postrequisite Metaprotocol
    Wondering what’s next for npm?Check out our public roadmap! »

    firestorter
    TypeScript icon, indicating that this package has built-in type declarations

    3.1.0 • Public • Published


    Firestorter

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

    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 MobX 6

    yarn add firestorter

    When using MobX 5 or 4, install the v2 version: yarn add firestorter@2

    1. Initialize

    import * as firebase from 'firebase/app';
    import 'firebase/firestore';
    import { initFirestorter } from 'firestorter';
    
    // Initialize firebase app
    firebase.initializeApp({...});
    
    // Initialize `firestorter`
    initFirestorter({ firebase: firebase });

    Firestorter also works with react-native and supports multi app environments

    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(class Todos extends React.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>;
    });

    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

    Want to learn more, head over to firestorter.com 🤘

    Install

    npm i firestorter

    DownloadsWeekly Downloads

    521

    Version

    3.1.0

    License

    MIT

    Unpacked Size

    761 kB

    Total Files

    33

    Last publish

    Collaborators

    • avatar