All Projects → jsayol → Rxfirebase

jsayol / Rxfirebase

Licence: other
RxJS wrapper with extra goodies for the Firebase JavaScript SDK

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Projects that are alternatives of or similar to Rxfirebase

rxjs-proxify
Turns a Stream of Objects into an Object of Streams
Stars: ✭ 34 (+209.09%)
Mutual labels:  rxjs, reactive-programming
Toy Rx
A tiny implementation of RxJS that actually works, for learning
Stars: ✭ 290 (+2536.36%)
Mutual labels:  rxjs, reactive-programming
observe-component
A library for accessing React component events as reactive observables
Stars: ✭ 36 (+227.27%)
Mutual labels:  rxjs, reactive-programming
vuse-rx
Vue 3 + rxjs = ❤
Stars: ✭ 52 (+372.73%)
Mutual labels:  rxjs, reactive-programming
Geofirex
🌐 📍 Geolocation Queries with Firestore & RxJS
Stars: ✭ 396 (+3500%)
Mutual labels:  rxjs, firebase
ng-observe
Angular reactivity streamlined...
Stars: ✭ 65 (+490.91%)
Mutual labels:  rxjs, reactive-programming
observable-playground
Know your Observables before deploying to production
Stars: ✭ 96 (+772.73%)
Mutual labels:  rxjs, reactive-programming
Beicon
Reactive Streams for ClojureScript
Stars: ✭ 133 (+1109.09%)
Mutual labels:  rxjs, reactive-programming
Recycle
Convert functional/reactive object description using RxJS into React component
Stars: ✭ 374 (+3300%)
Mutual labels:  rxjs, reactive-programming
Learn Rxjs
Clear examples, explanations, and resources for RxJS
Stars: ✭ 3,475 (+31490.91%)
Mutual labels:  rxjs, reactive-programming
Angularfire Lite
⚡️ Lightweight library to use Firebase API 🔥 with Angular
Stars: ✭ 245 (+2127.27%)
Mutual labels:  rxjs, firebase
Refract
Harness the power of reactive programming to supercharge your components
Stars: ✭ 791 (+7090.91%)
Mutual labels:  rxjs, reactive-programming
Awesome Reactive Programming
A repository for sharing all the resources available on Reactive Programming and Reactive Systems
Stars: ✭ 163 (+1381.82%)
Mutual labels:  rxjs, reactive-programming
reactive-angular-workshop
This is the source code for the world's greatest Reactive Angular Workshop.
Stars: ✭ 30 (+172.73%)
Mutual labels:  rxjs, reactive-programming
Redux Most
Most.js based middleware for Redux. Handle async actions with monadic streams & reactive programming.
Stars: ✭ 137 (+1145.45%)
Mutual labels:  rxjs, reactive-programming
angular2-instagram
🔥Instagram like photo filter playground built with Angular2 (Web | Desktop)
Stars: ✭ 91 (+727.27%)
Mutual labels:  rxjs, reactive-programming
Cyclejs.cn
The Cycle.js Chinese documentation website.
Stars: ✭ 132 (+1100%)
Mutual labels:  rxjs, reactive-programming
Od Virtualscroll
🚀 Observable-based virtual scroll implementation in Angular
Stars: ✭ 133 (+1109.09%)
Mutual labels:  rxjs, reactive-programming
Awesome Rxjs
A collection of awesome RxJS resources
Stars: ✭ 314 (+2754.55%)
Mutual labels:  rxjs, reactive-programming
Reactive.how
Learn reactive programming with animated cards.
Stars: ✭ 592 (+5281.82%)
Mutual labels:  rxjs, reactive-programming

RxFirebase

npm version

Apache 2.0 License

RxJS wrapper with extra goodies for the Firebase JavaScript SDK.

Installation

Via npm

npm install rxjs firebase rxfirebase --save

Via yarn

yarn add rxjs firebase rxfirebase

Usage

ES6 and TypeScript

import { RxFirebase } from 'rxfirebase';

const firebaseConfig = {
  apiKey: "...",
  authDomain: "...",
  databaseURL: "...",
  messagingSenderId: "...",
  storageBucket: "...",
};

RxFirebase.initializeApp(firebaseConfig);

const items$ = RxFirebase.database.ref('/items').onChildAdded();

items$.subscribe(snapshot => {
  console.log(`Child added with key ${snapshot.key} and value ${snapshot.val()}`);
});

const secretItems$ = RxFirebase.database.ref('/super/secret/items')
  .afterSignIn()
  .untilSignOut()
  .getValue()
  .onChildRemoved();
  
secretItems$.subscribe(item => {
  // Using getValue() emits the value itself instead of the snapshot.
  // It's equivalent to calling snapshot.val()
  console.log(`Child removed with value ${item}`);
});

const userPostsOnSignIn$ = RxFirebase.auth.onSignIn$.switchMap(auth =>
  RxFirebase.database.ref(`/userPosts/${auth.uid}`)
    .asList()
    .untilSignOut()
    .once('value')
);

userPostsOnSignIn$.subscribe(posts => {
  console.log(`This user has ${posts.length} posts.`);
  if (posts.length > 0) {
    // Using asList() emits the data as an Array with the key for each item stored as item.$key
    // If the value is an Object then "item" is the value itself, otherwise
    // it is stored in item.$value (for strings, numbers, and booleans)
    const post = posts[0];
    console.log(`The title for the first post, with key ${post.$key}, is "${post.title}"`);
  }
});

RxFirebase.auth.isSignedIn$.subscribe(isSignedIn => {
  console.log(`The user is ${isSignedIn ? '' : 'NOT '}signed in.`);
});

setTimeout(() => {
  console.log('Signing in...');
  RxFirebase.auth.signInAnonymously();
}, 2000);

setTimeout(() => {
  console.log('Signing out...');
  RxFirebase.auth.signOut();
}, 10000);

UMD (CommonJS, AMD)

Coming soon

TO-DO

  • [ ] Add tests
  • [x] Auth support
  • [x] Database support
  • [ ] Storage support
  • [ ] Messaging support
  • [ ] Fix building of UMD module (CommonJS, AMD)
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].