https://github.com/premshree/use-pagination-firestore
🔥 React hook for non-cumulative pagination of Firebase Firestore collections
https://github.com/premshree/use-pagination-firestore
firebase firestore hooks pagination react reacthooks
Last synced: 9 months ago
JSON representation
🔥 React hook for non-cumulative pagination of Firebase Firestore collections
- Host: GitHub
- URL: https://github.com/premshree/use-pagination-firestore
- Owner: premshree
- Created: 2020-06-17T02:49:30.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2025-01-25T20:30:49.000Z (over 1 year ago)
- Last Synced: 2025-09-30T19:50:05.247Z (9 months ago)
- Topics: firebase, firestore, hooks, pagination, react, reacthooks
- Language: TypeScript
- Homepage:
- Size: 110 KB
- Stars: 26
- Watchers: 1
- Forks: 10
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# use-pagination-firestore
A React Hook that makes it easy to paginate firestore collections.
This hook is similar, but the not the same as
[firestore-pagination-hook](https://github.com/bmcmahen/firestore-pagination-hook). This hook
provides _non cumulative_ pagination and does _not_ maintain references to previous
documents, so it might be suitable for large document sets.
## Support for Firebase 9
Versions 0.6.x add support for Firebase 9 and are backwards _incompatible_ with previous versions of Firebase. For support for Firebase 8.x, use versions 5.x of `use-pagination-firestore`.
## Install
```
npm install use-pagination-firestore
```
## Example Use
This is an example of a "recently added perfumes" section built using [Material UI](https://material-ui.com/)
and [Firestore](https://firebase.google.com/docs/firestore/). You can see it live on the Petrichor homepage [here](https://petrichor.se/), or
[here](https://imgur.com/a/nUrgzaO) is a screencast.
```jsx
import React from 'react';
import Grid from "@material-ui/core/Grid";
import PerfumeCard from "./search/PerfumeCard";
import { usePagination } from "use-pagination-firestore";
import Loading from "./Loading";
import {
NavigateNext as NavgateNextIcon,
NavigateBefore as NavigateBeforeIcon
} from '@material-ui/icons';
import { IconButton } from "@material-ui/core";
import { initializeApp } from "firebase/app";
import { getFirestore, collection, query, orderBy } from "firebase/firestore";
const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);
const RecentPerfumes = () => {
const {
items,
isLoading,
isStart,
isEnd,
getPrev,
getNext,
} = usePagination(
query(collection(db, "/perfumes"), orderBy("updated", "desc")),
{
limit: 10
}
);
if (isLoading) {
return ;
}
return (
{items.map((perfume, idx) => {
return (
);
})}
);
}
export default RecentPerfumes;
```
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 `limit` and `orderDirection` by React's state:
```jsx
type ORDER_DIRECTION = 'asc' | 'desc';
const DEFAULT_PAGE_SIZE = 10;
const RecentPerfumes = () => {
const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
const [order, setOrder] = useState('desc');
const {
items,
isLoading,
isStart,
isEnd,
getPrev,
getNext,
currentPage,
} = usePagination(
query(collection(db, "/perfumes"), orderBy("updated", "desc")),
{
limit: pageSize
}
);
if (isLoading) {
return ;
}
return (
Page {currentPage}
{items.map((perfume, idx) => {
return (
);
})}
);
}
```
## Caveats
Paginating Firestore documents relies on [query cursors](https://firebase.google.com/docs/firestore/query-data/query-cursors). It's not easy to know
ahead of time how many documents exist in a collection. Consequently, if your `document_count % page_size` is `0` you will notice that your last page
is empty – this is because this hook doesn't (currently) look ahead to know if there are any more documents.