# react-with-firestore

> an HOC to pass data from Firestore to React Components

Latest version **0.1.0** (published 2017-11-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-with-firestore
pnpm add react-with-firestore
yarn add react-with-firestore
bun add react-with-firestore
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2017-11-08 |
| First published | 2017-11-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 3 |
| Author | ERmarsland@gmail.com |
| Maintainers | emars |
| Keywords | Firebase, Firestore, React |

## Links

- npm: https://www.npmjs.com/package/react-with-firestore
- Repository: https://github.com/emars/react-with-firestore
- Homepage: https://github.com/emars/react-with-firestore#readme
- Issues: https://github.com/emars/react-with-firestore/issues
- npm.io page: https://npm.io/package/react-with-firestore

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.0.0
- [firebase](https://npm.io/package/firebase.md) ^4.6.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2017-11-08

## README

# React With Firestore

Provides a HOC to listen to Firestore (Queries, Documents or Collections) and pass data to React Components.

## About

This module accepts a `refs` argument can be either an array or a function returning an array.

This array contains the Firestore Queries, Documents or Collection references that should be passed to the Component as well as the names to access them.

The HOC will pass a `data` and `loading` prop to the wrapped component.

## Installation

```
yarn add react-with-firestore
```

## Example

```js
import React, { Component } from 'react'
import withFirestore from 'react-with-firestore'

class Todos extends Component {
    render () {
        if (this.props.loading) {
            return (
                <p>loading...</p>
            )
        }

        // data contains a key called 'todos' as specified by the refs
        return this.props.data.todos.map((todo) => {
            // render the item...
        })
    }
}

const todosCollection = firestore.collection('todos')

const refs = (props) => ([
    {
        name: 'todos',
        ref: todosCollection
    }
])
}

export default withFirestore(refs)(Todos)
```

## License

MIT

---
_Source: https://npm.io/package/react-with-firestore · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._