react-inject-firebase-data React component
npm install react-inject-firebase-datayarn add react-inject-firebase-data or npm install --save react-inject-firebase-datajavascript
import * as firebase from 'firebase';
import InjectFirebaseData from 'react-inject-firebase-data';const App = () => (
{({ data }) => {data}}
);
`$3
javascript
import * as firebase from 'firebase';
import { InjectFirebaseDataHOC } from 'react-inject-firebase-data';const App = ({ data }) =>
{data};export default InjectFirebaseDataHOC(
firebase.database().ref().child('foo')
)(App);
`Props
= requiredProp | 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
| The children function | func |$3
Signature:InjectFirebaseDataHOC(firebaseRef: firebase.database.Reference, renderWhileLoading: bool) => (WrappedComponent: React.Component) => React.ComponentFor parameter explanation, see the props table.
$3
The function receives an object as its argument, which contains the following keys:Key | Description | Type
--- | ----------- | ----
data | The retrieved Firebase data | any
| The key of the retrieved data | string
| true when the Firebase data has not yet been received. Only gets passed when the renderWhileLoading prop is set to true | boolFor the Higher-Order Component, this object becomes the wrapped component's props.
Development
$3
or npm install$3
or npm start$3
or npm test#### Building
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).