# firebase-react-paginated

> firebase-react-paginated React component

Latest version **1.0.3** (published 2017-06-09) · BSD-2-Clause license · 0 weekly downloads

## Install

```sh
npm install firebase-react-paginated
pnpm add firebase-react-paginated
yarn add firebase-react-paginated
bun add firebase-react-paginated
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2017-06-09 |
| First published | 2017-06-08 |
| Weekly downloads | 0 |
| License | BSD-2-Clause |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Georges Boris |
| Maintainers | georgesboris |
| Keywords | react, react-hoc, firebase, pagination |

## Links

- npm: https://www.npmjs.com/package/firebase-react-paginated
- Repository: https://github.com/tasking/firebase-react-paginated
- Issues: https://github.com/tasking/firebase-react-paginated/issues
- npm.io page: https://npm.io/package/firebase-react-paginated

## 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

- 1.0.3 (latest) — 2017-06-09
- 1.0.2 — 2017-06-09
- 1.0.1 — 2017-06-08
- 1.0.0 — 2017-06-08

## README

# firebase-react-paginated

Implementing paginated lists when dealing with dynamic content using Firebase can be troublesome. This simple HOC will make dealing with this a breeze for most cases.

## Table of Contents

[Demo](https://codesandbox.io/s/qKQ9DMMR)

[Getting Started](#getting-started)

[Composing with connect or other HOCs](#composing-with-connect-or-other-hocs)

[Configurations](#configurations)

[Required Data Structure](#required-data-structure)

[Next Steps](#next-steps)

## Getting started

First of all, install the package dependency from npm.

```
npm -i -s firebase-react-paginated
```

You can then create your component using any of our props.

```javascript
// ./components/MyComponent

import React from 'react'
import MyListItem from './MyListItem';

const MyComponent = ({
  pageItems,
  hasNextPage,
  hasPrevPage,
  onNextPage,
  onPrevPage,
  isLoading
}) => (
  <div>

    {(isLoading) ? (
      <p>loading list page…</p>
     ) : (
      <ul>
        {pageItems.map((item.id) => (
          <li key={item.id}>
            <MyListItem itemId={item.id} />
          </li>
        ))}
      </ul>
    )}
    
    <button disabled={!hasPrevPage} onClick={onPrevPage}>
      show previous page
    </button>
    
    <button disabled={!hasNextPage} onClick={onNextPage}>
      show next page
    </button>

  </div>
);

export default MyComponent;
```

Then create your container using `withFirebasePagination`.

```javascript
// ./containers/MyComponent

import React from 'react'
import firebase from 'firebase';
import withFirebasePagination from 'firebase-react-paginated';
import MyComponent from '../components/MyComponent';

firebase.config(/* your firebase config */);

export default withFirebasePagination(firebase)({
  path: 'listItems',
  orderBy: '.value',
  length: 20
})(MyComponent);
```

## Composing with connect or other HOCs

You can compose your component as you would with `connect` or any other HOC from `recompose` for instance.

```javascript
import { compose } from 'redux';
import { connect } from 'react-redux';
import { withFirebasePagination } from 'firebase-react-paginated';
import { fetchItem } from './redux/actions';

...

export default compose(
  connect(null, { fetchItem }),
  withFirebasePagination({
    path: 'list',
    onNewItem: ({ fetchItem }) => (itemId) => fetchItem(itemId)
  })
)(MyComponent);
```

## Configurations

`withFirebasePagination(*firebase)(*options)(*WrappedComponent)`

**\*firebase** - must be a valid firebase object or a valid firebase reference.

**\*options** - an object as specified below

**\*WrappedComponent** - the component that will receive the list props

### Options

|prop|value|description|
|---|---|---|
|path|`string`|the path to your firebase list. e.g. `list`. **required**|
|length|`number`|the number of items per page. defaults to `10`.|
|orderBy|`string`|the prop that will be used for ordering the list. **must hold numbered values**. defaults to `.value`. e.g. `.value or .priority or propName`|
|onNewItem|`function`|a function that is called whenever a new item is added to the list (only once per item id). e.g. `(props) => (item) => {...}`|
|onNewPage|`function`|a function that is called whenever a new page is rendered (even when calling 'the same page' twice as pages may have changed). e.g. `(props) => (pageItems) => {...}`|

### Passed Props

|prop|value|description|
|---|---|---|
|isLoading|`boolean`|is true when a new page is loading.|
|hasNextPage|`boolean`|is true when the next page has items.|
|hasPrevPage|`boolean`|is true when the previous page has items.|
|onNextPage|`function`|will render the next page when called. takes no arguments.|
|onPrevPage|`function`|will render the previous page when called. takes no arguments.|

## Next Steps

- [x] accept other `orderBy` possibilities
- [ ] create tests using jest

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