https://github.com/jsayol/rxfirebase

RxJS wrapper with extra goodies for the Firebase JavaScript SDK
https://github.com/jsayol/rxfirebase

firebase javascript reactive-programming rxjs rxjs-wrapper typescript

Last synced: 18 days ago
JSON representation

RxJS wrapper with extra goodies for the Firebase JavaScript SDK

• Host: GitHub
• URL: https://github.com/jsayol/rxfirebase
• Owner: jsayol
• License: other
• Created: 2016-12-18T22:53:56.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2016-12-30T14:44:54.000Z (almost 8 years ago)
• Last Synced: 2024-10-24T18:27:56.865Z (22 days ago)
• Topics: firebase, javascript, reactive-programming, rxjs, rxjs-wrapper, typescript
• Language: TypeScript
• Homepage:
• Size: 27.3 KB
• Stars: 10
• Watchers: 4
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# RxFirebase

[![npm version](https://badge.fury.io/js/rxfirebase.svg)](https://www.npmjs.com/package/rxfirebase)

[Apache 2.0 License](LICENSE.txt)

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

```ts

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)