Mobx Fire

Map your Firebase state to MobX Observables.

Peer Dependencies

This library relies on having firebase (web, admin or react-native) and mobx installed and initialized. If you haven't installed them previously :

  yarn add mobx firebase
  # or yarn add mobx firebase-admin
  # or yarn add mobx react-native-firebase
  # Or npm i mobx firebase

Install

  yarn add mobx-fire
  # Or npm i mobx-fire

Realtime Database

Map your Firebase database to mobx observables.

This module exports 3 methods :

• toBox
• toMap
• toArray

import { toBox, toMap, toArray } from "mobx-fire";

const ref = firebase.database().ref("path/to/data");
const box = toBox(ref, { initial: "" }); // returns an observable.box() with the value of the firebase node
const map = toMap(ref); // returns an observable.map() with the value of the firebase node
const array = toArray(ref, initial: [{value:"A", key:"a"}]); // returns an ordered observable.array() with the value of the firebase node

API

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>;
};

toArray

type ToArrayOptions<K, V> = {
  map?: (k: K, v: V) => any;
  filter?: (k: K, v: V) => boolean;
  initial?: Array<V>;
};

Output

A mobx observable (box, map, or array) that always has the latest value of the ref inside it.

toBox

const box = toBox(ref, { initial: "something" });
// IObservableValue<string>
const box2 = toBox(ref, { initial: 4 });
// IObservableValue<number>

toMap

const map = toMap(ref);
// IObservableMap<string, any>

toArray

const map = toMap(ref);
// IObservableMap<string, any>

Check the tests for more examples !