https://github.com/egodact/react-inject-firebase-data
React component that injects Firebase data
https://github.com/egodact/react-inject-firebase-data
firebase firebase-database inject-firebase react react-component
Last synced: about 2 months ago
JSON representation
React component that injects Firebase data
- Host: GitHub
- URL: https://github.com/egodact/react-inject-firebase-data
- Owner: egodact
- Created: 2018-03-24T17:04:01.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-12-09T14:09:39.000Z (over 7 years ago)
- Last Synced: 2025-03-18T13:08:42.921Z (over 1 year ago)
- Topics: firebase, firebase-database, inject-firebase, react, react-component
- Language: JavaScript
- Size: 120 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# 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](https://github.com/rafaelklaessen/react-inject-firebase-data/tree/master/demo/src) for full examples.
### With a function as children
```javascript
import * as firebase from 'firebase';
import InjectFirebaseData from 'react-inject-firebase-data';
const App = () => (
{({ data }) =>
{data}}
);
```
### With the Higher-Order Component
```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
`*` = 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).