react-inject-firebase-data

React component that injects real-time Firebase data.

Install

yarn add react-inject-firebase-data or npm install --save react-inject-firebase-data

Usage

See the demo for full examples.

With a function as children

import * as firebase from 'firebase';
import InjectFirebaseData from 'react-inject-firebase-data';
 
const App = () => (
  <InjectFirebaseData firebaseRef={firebase.database().ref().child('foo')}>
    {({ data }) => <pre>{data}</pre>}
  </InjectFirebaseData>
);

With the Higher-Order Component

import * as firebase from 'firebase';
import { InjectFirebaseDataHOC } from 'react-inject-firebase-data';
 
const App = ({ data }) => <pre>{data}</pre>;
 
export default InjectFirebaseDataHOC(
  firebase.database().ref().child('foo')
)(App);

Props

* = required

Prop	Description	Type	Default
firebaseRef*	The Firebase database reference from which the value should be received	object
renderWhileLoading	When true, the children function gets called before the data is loaded	bool	false
children*	The children function	func

Props with the Higher-Order Component

Signature:

InjectFirebaseDataHOC(firebaseRef: firebase.database.Reference, renderWhileLoading: bool) => (WrappedComponent: React.Component) => React.Component

For parameter explanation, see the props table.

Parameters passed to the children function or the WrappedComponent

The children function receives an object as its argument, which contains the following keys:

Key	Description	Type
data	The retrieved Firebase data	any
dataKey	The key of the retrieved data	string
loading	true when the Firebase data has not yet been received. Only gets passed when the renderWhileLoading prop is set to true	bool

For the Higher-Order Component, this object becomes the wrapped component's props.

Development

Installation

yarn install or npm install

Run demo

yarn start or npm start

Run tests

yarn test or npm test

Building

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).