React-inject-firebase-data NPM

react-inject-firebase-data

React component that injects real-time Firebase data.

Demo screenshot

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`