React-global-from-firebase NPM

react-global-from-firebase

React component that sets up a global state from Firebase refs

Demo screenshot

Install

yarn add react-global-from-firebase or npm install --save react-global-from-firebase

Usage

See the demo for full example.

import * as firebase from 'firebase';
import GlobalFromFirebase from 'react-global-from-firebase';

const ref = firebase.database().ref();

const App = () => (
  <GlobalFromFirebase
    firebaseRefs={{
      foo: ref.child('foo'),
      bar: {
        ref: ref.child('bar'),
        idRef: ref.child('barId') // For caching
      }
    }}
    loadingScreen={() => <h1>Loading</h1>}
  >
    <div>Blah</div>
  </GlobalFromFirebase>
);

Caveats

For some reason, the direct children of GlobalFromFirebase cannot use the global object correctly (since the ref values haven't been set yet). This shouldn't be too much of an issue since you could just put the code that relies on global in a separate component, that'll work.

See the demo for an example.

Props

* = required

Prop	Description	Type
`firebaseRefs*`	The refs that should be loaded into the `global` object. The ref value will be added to the `global` object under given key (eg if you do `{ foo: ref.child('bar') }`, `global.foo` will be set to the value of `ref.child('bar')`).	`object`
`loadingScreen`	Node to show while the ref values are loading. Can also take a function that returns an node Signature of the function when passed: `function(state: object) => node`	`node` or `function`
`onUpdate`	Invoked whenever a Firebase value is updated	`function(state: object) => any`
`children*`	Children of the component	`node`

Caching

Normally, the object you'd pass to the firebaseRefs prop would look like this:

{
  foo: someRef.child('foo'),
  bar: someRef.child('baz')
}

It is however possible to cache the values of refs. To do this, an idRef is expected (see example below). The idRef is supposed to be a ref that contains some unique ID of the given ref's value. The value of the given ref will only be fetched when this ID changes or when it isn't cached yet. Below is an example with two cached refs:

{
  foo: {
    ref: someRef.child('foo'),
    idRef: someRef.child('fooId')
  },
  bar: {
    ref: someRef.child('baz'),
    idRef: someRef.child('bazId')
  }
}

Caching only makes sense when the ref contains a large value that should be fetched as little as possible.