React Hook for Paginating Firebase Collection in Realtime
This is a React hook for Paginating your Firebase Collections in Realtime using a lot of snapshots.
How it works
Basically, It reads the amount of documents you need per page, then it creates a snapshot listener for that particular page. Thus when any document updates, it will update your page as well.
Basic Usage
const [blogPosts, loadMore, loading, finished] = usePaginateCollection<PostDocument>(collectionRef, {
orderKey: 'postedDate',
direction: 'desc',
pageLimit: DOCUMENTS_PER_PAGE
})
useEffect(() => {
if(atBottom) loadMore()
}, [atBottom])
return <div>
{blogPosts.map(blog => <BlogViewer blog={blog} />)
</div>API Reference
const usePaginateCollection = <DocType extends DocumentData = DocumentData>(colRef: CollectionReference<DocType>, {
orderKey: string,
pageLimit: number,
direction: 'asc' | 'desc',
queryConstraints?: QueryConstraint[],
sortFunc?: (a: DocType, b: DocType) => number
}) => [DocType[], () => void, boolean, boolean]Used on Speer Education