React component that sets up a global state from Firebase refs
yarn add react-global-from-firebase
or npm install --save react-global-from-firebase
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>
);
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.
*
= 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 |
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.
yarn install
or npm install
yarn start
or npm start
yarn test
or npm test
yarn build
or npm run build
will build the component for publishing to npm and also bundle the demo app.
yarn clean
or npm run clean
will delete built resources.
Notice that you'll need to temporarily delete .babelrc
to be able to build the component (just put it back after you're done building).