react-hook-pagination
React Hook for implementing load more on scroll for list and tables in React.
- Easy to use hook API, hook your list/table to a scroll element and wait for the hook to tell you when to fetch next batch of data!
- Initial fetch till scroll appears
- Customise load behaviour via parameters (fetchSize, limit etc)
- Configure custom loader, end of list behavior (show spinner, loader icons etc)
- Externalized fetch (You define how to fetch, hook decides when to fetch)
Website
Find Demos and Docs here
Install
npm install --save react-hook-pagination
Usage
import React useState useRef useEffect from "react";import person from "./mock.json";import useLoadMoreOnScroll from 'react-hook-pagination'; const List = { const fetchSize = 20; const limit = 1000; const ulElement = ; const data setData = ; const start end isFetching doneFetching setIsFetching forceDonefetching } = ; ; /** * * @param * @param */ const fetchHandler = start end ; ; ; return <div ="list" = => data isFetching && <div ="list-item-loader"></div> doneFetching && <div ="list-item-done">Done!</div> </div> ;};;
License
MIT © sumedh22