react-firebase-pagination

A React Hook that makes it easy to paginate Firestore collections. This hook provides cumulative pagination and maintains references to previous documents, so it might not be suitable for large document sets.

Support for Firebase 9

support for Firebase 9 and are backwards incompatible with previous versions of Firebase.

Install

npm install react-firebase-pagination

OR

yarn add react-firebase-pagination

Options

prop	Type	Default	description	Required
query	Query	null	The query of your Firebase database. e.g. query(collection(db, '[collection]')).	✔
pageSize	Number	10	The number of items per page.
pageByPage	Boolean	false	When this option is True, data is loaded page by page like Google search, and when it's not, it loads data on a single page and appends new data on the bottom of current data like a Facebook feed.
liveUpdate	Boolean	false	Add Firebase snapshot listener to update data live

State

prop	value	description
loading	Boolean	Is true when a page is loading.
data	Object	Data Object
getNext	Function	W'll render the next page when called. (Take no arguments)
getPrevious	Function	W'll render the previous page when called. (Take no arguments and work only in pageByPage mode)
hasNext	Boolean	It's true when the next page has data.
hasPrevious	Boolean	It's true when a previous page has data. (Work only in pageByPage mode)

Data Object Contain

prop	value	description
docs	Documents	Document Array.
totalDocs	Number	Total Document count.
totalPages	Number	Total Page count.
currentPage	Number	Current Page Number in pageByPage mode or how may time's data load on the current page

Example Use

This is an example of a Firestore.

You can also change query during runtime. Hook will detect new query and start pagination from the beginning. Here is an example of controlling query's orderDirection by React's state:

import usePagination from 'react-firebase-pagination';
import { query, orderBy, collection } from 'firebase/firestore'
import db from './your/database/path';

const mainQuery = query(collection(db, '[collection]'), orderBy('created_timestamp', 'desc'));

const App = () => {
  const { getNext, getPrevious, data, loading } = usePagination({
    pageSize: 10,
    pageByPage: true,
    query: mainQuery,
  })

  if (loading) {
    return <LoadingComponent />
  }

  ...
}