jsayol / Rxfirebase
Licence: other
RxJS wrapper with extra goodies for the Firebase JavaScript SDK
Stars: ✭ 11
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
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
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].