firebase-react-paginated

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

Getting Started

Composing with connect or other HOCs

Configurations

Required Data Structure

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.

// ./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.

// ./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.

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

• accept other orderBy possibilities
• create tests using jest