react-firebase-fns

react-firebase-fns Firebase's JavaScript SDK turned into declarative React components.

Components

Value

Watch a Realtime Database value. Equivalent to https://firebase.google.com/docs/database/web/read-and-write#listen_for_value_events

<Value
  path="/realtime/database/path"
>{(val) =>
  {/* val is the value from dataSnapshot.val() */}
}</Value>

List

Watch a Realtime Database list. Equivalent to https://firebase.google.com/docs/database/web/lists-of-data#listen_for_child_events

<List
  path="/realtime/database/list"
 
  orderBy="child | key | value"
  // orderBy="child" is optional when orderByChild is set, but orderByChild is required when orderBy="child"
  // orderByChild is ignored when orderBy is set to anything other than child
  orderByChild="child key or path"
 
  startAt="value"
  startAtKey="optional key"
 
  endAt="value"
  endAtKey="optional key"
 
  equalTo="value"
  equalToKey="optional key"
 
  limitToFirst="number"
  limitToLast="number"
>{(list) =>
  {/* list is updated on child_added, child_removed, and child_changed events */}
}</List>

User

A user state provider for Authentication. Equivalent to https://firebase.google.com/docs/auth/web/start#set_an_authentication_state_observer_and_get_user_data

Unlike other components, User is a React Context with a Provider and Consumer.

<User.Provider>
 
  <SomeComponents>
    <DeeplyNested>
 
      <User.Consumer>{(user) =>
        {/* user will be undefined if not logged in */}
      }</User.Consumer>
    
    </DeeplyNested>
  </SomeComponents>
 
</User.Provider>

Upload task

The the progress for a Storage upload. Equivalent to https://firebase.google.com/docs/storage/web/upload-files#monitor_upload_progress

const uploadTask = storageRef.put(file)
// ...some lines later
<UploadTask uploadTask={uploadTask}>{({bytesTransferred, totalBytes}) =>
  <progress value={bytesTransferred} max={totalBytes}></progress>
}</UploadTask>

Missing components?

The entire SDK won't be exposed in this library. Only the parts with a realtime aspect make sense.

The following is not implemented yet. Make a pull request? ❤️

Realtime Database

• Connection state
• Presence

Cloud Firestore

• Realtime updates

Installation

npm install --save react-firebase-fns

Global Firebase

Configure Firebase as usual and react-firebase-fns will use the global Firebase with:

import {Value, List, User} from 'react-firebase-fns'

Provided Firebase application

You can also pass in a Firebase application.

import ReactFirebaseFns from 'react-firebase-fns'
import Firebase from 'firebase'
 
const {Value, List, User} = ReactFirebaseFns(Firebase.initializeApp(config))

Roadmap

• add render prop
• add component prop

Inspired by react-fns.

Ronald Chen @pyrolistical