GithubHelp home page GithubHelp logo

mobx-firebase-database's Introduction

Mobx Firebase Database

CircleCI NPM BundlePhobia

mobx-firebase-database allows you to map your Firebase data to MobX observables and interact with/react to it using MobX.

Install

  yarn add mobx-firebase-database
  # If you're using firebase web
  yarn add firebase
  # If you're using firebase-admin
  yarn add firebase-admin
  # If you're using react-native-firebase
  yarn add react-native-firebase

Peer Dependencies

mobx-firebase-database works with : firebase, firebase-admin and react-native-firebase

Depending on which one you're using you will need to have it installed.

Usage

Web

Before starting to code, you need to get your Firebase Credentials :

Follow the steps here to get your config.

import getMobxFire from "mobx-firebase-database";
import firebase from "firebase/app";
import "firebase/database";

// Don't worry about calling it more than once.
const { toBox, toMap, getFirebaseRef, destroy } = getMobxFire({
  config,
  firebase
});

// toBox
const postId = `my_post_id`;
const postRef = getFirebaseRef({ path: `posts/${postId}` });
const { value, unsub } = toBox(postRef);

const post = value.get(); // always contains the latest value of posts/${postId}
await postRef.update({ last_seen_at: firebase.database.ServerValue.TIMESTAMP });
value.get(); // {...post, last_seen_at: number}
await postRef.set(null);
value.get(); // null

// toMap
const postId = `my_post_id`;
const postsRef = getFirebaseRef({ path: `posts`, orderByKey: true });
const { value, unsub } = toMap(postRef);
const allPostsIds = value.keys();
const post = value.get(`${postId}`);

API

mobxFirebaseDatabase

Input :

getMobxFire requires as input an object with shape :

  • config:
{
  apiKey: string,
  authDomain: string,
  databaseURL: string,
  storageBucket: string
}
  • firebase : Firebase web client from firebase package

Output :

Object with shape :

type Output<T> = {
  toArray: ToArray;
  toBox: ToBox;
  toMap: ToMap;
  getFirebaseRef: (query: FirebaseQuery) => any;
  destroy: () => void;
};

toBox and toMap

Input

All methods take in 2 arguments, the first is required and the second optional :

  • ref : Any firebase ref, with or without sorting and/or limiting.
  • options : depends on the method
toBox
type ToBoxOptions<V> = {
  map?: (m: V) => any;
  filter?: (m: V) => boolean;
  initial?: V | null;
};
toMap
type ToMapOptions<K, V> = {
  mapKey?: (m: K) => any;
  mapValue?: (m: V) => any;
  filter?: (prevValue: V, currentValue: V) => boolean;
  initial?: ObservableMap<K, V>;
};

Output

An object with the following shape :

  • value : Observable box with the latest value of the ref inside, or null if it doesn't exist or is not fetched yet.

  • unsub : A function to turn off the firebase ref listener when you don't need it anymore.

toBox
const { value, unsub } = toBox(ref, { initial: "something" });
toMap
const { value: map, keys } = toMap(ref);
// map: ObservableMap<string, any>
// keys: IObservableArray<string>

mobx-firebase-database's People

Contributors

rakannimer avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Forkers

sarazeaiter1

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.