Giter Club home page Giter Club logo

rx-firebase's Introduction

Rx Firebase

Build Status Coverage Status Dependency Status

Extends Firebase websocket client with RxJS methods.

Install

npm install rx-firebase firebase@3 rxjs

Usage

Extends firebase using RxJS (any ES stage 1 Observable supporting map, merge and scan operators could be used):

const rxFirebase = require('rx-firebase');
const firebase = require('firebase');
const rx = require('rxjs');

rxFirebase.extend(firebase, rx.Observable);

You can then observe auth changes:

firebase.auth().observeAuthState().subscribe(
  user => console.log(user)
)

Or observe database changes:

const ref = firebaseApp.database().ref('/some/data');

ref('/some/data').observe('value').subscribe(
  val => console.log(val, `val: ${val}`);
);

ref.set('first');
// Output:
// {$value: 'first'} val: first

ref.set({some: 'thing'});
// Output:
// {some: 'thing'} val: [object Object]

It emits the DataSnapShot value as an object. If the value is a literal, it will emit an object with the value assign to "$value" with "toString" and "toJSON" methods pointing to "$value".

If you would like the observable to emit the snapshot itself:

ref('/some/data').observe('value', {unpack: false});

In any case, the object will also include the "$key", "$ref", "prev" and "$eventType" properties.

Finally, you can use observeChildren to emit an array

const otherRef = firebaseApp.database().ref('/some/other/data');

otherRef.push().setWithPriority('first', 1);
otherRef.push().setWithPriority('second', 2);
otherRef('/some/data').orderByPriority().observeChildren().subscribe(
  list => console.log(list, list.join(','));
);
// Output:
// [{$value: 'first'}] "first"
// [{$value: 'first'}, {$value: 'second'}] "first","second"

It observes the "child_*" changes to emit an ordered array. Note that you cannot update the array to update the underlying data in the Firebase database.

Each item includes "$ref" and "$key" property referencing the item firebase reference and key.

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.