Map your Firebase state to MobX Observables.
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
yarn add mobx-fire
# Or npm i mobx-fire
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
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
type ToBoxOptions<V> = {
map?: (m: V) => any;
filter?: (m: V) => boolean;
initial?: V | null;
};
type ToMapOptions<K, V> = {
mapKey?: (m: K) => any;
mapValue?: (m: V) => any;
filter?: (prevValue: V, currentValue: V) => boolean;
initial?: ObservableMap<K, V>;
};
type ToArrayOptions<K, V> = {
map?: (k: K, v: V) => any;
filter?: (k: K, v: V) => boolean;
initial?: Array<V>;
};
A mobx observable (box, map, or array) that always has the latest value of the ref inside it.
const box = toBox(ref, { initial: "something" });
// IObservableValue<string>
const box2 = toBox(ref, { initial: 4 });
// IObservableValue<number>
const map = toMap(ref);
// IObservableMap<string, any>
const map = toMap(ref);
// IObservableMap<string, any>
Check the tests for more examples !