A lightweight React component that provides infinite scroll and pagination functionality for data-driven applications. It simplifies the process of paginating large datasets by dynamically loading and rendering new data as the user scrolls.
Install the package using npm or yarn:
npm i react-scroll-pagify
or
yarn add react-scroll-pagify
Here's a basic example of how to use the ReactScrollPagify
component:
import React, { useState } from "react";
import { ReactScrollPagify } from "react-scroll-pagify";
const YourComponent = () => {
const [currentPage, setCurrentPage] = useState(1);
const [data, setData] = useState([]);
const totalPages = 50; // Calculate based on your total data
const handlePageChange = (page) => {
setCurrentPage(page);
// Fetch or update your data here
};
const handleRefresh = () => {
// Implement refresh logic here
};
return (
<ReactScrollPagify
data={data}
onChangePage={handlePageChange}
pagination={{
page: currentPage,
totalPage: totalPages,
}}
onRefresh={handleRefresh}
enablePulling={true}
>
{/* You have to make component with data props. without data props it will not work */}
<YourListComponent data={[]} />
</ReactScrollPagify>
);
};
Prop | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | - | The content to be rendered within the scrollable sections |
threshold | number | - | The scroll threshold to trigger page changes |
data | T[] | - | The array of data to be paginated and displayed |
onChangePage | (page: number) => void | - | Callback triggered when the page changes |
onDataChange | (data:T[]) => void | - | Callback triggered when the data changes and you can customize your data on that |
onLoadMore | (page: number) => void | - | Callback triggered when the click on load more button |
pagination | { page: number; totalPage: number } | - | Object with current page and total pages information |
isLoading | boolean | false | Indicates if data is currently loading |
enableDataMemorization | boolean | true | Indicates the given data should memorize or not. if enable it will enable the data otherswise not. |
loadingOverlay | React.ReactNode | - | Custom loading overlay component |
loadMoreButton | React.ReactNode | - | Custom Load more button component |
styleRootElement | Record<string, string | number | undefined> | - | Custom styles for the root element |
rootClassName | string | - | Custom class name for the root element |
rootElementId | string | - | Custom ID for the root element |
enableLoadMoreButton | boolean | false | Enable or disable the load more button |
enablePulling | boolean | false | Enable or disable pull-to-refresh functionality |
pulingOptions | { position: number | string | undefined } | - | Options for pull-to-refresh behavior. note: by default it will work when the root element in scrolling possition in top. you can pass any position number or "any" - it will work every places you want. |
onRefresh | () => void | - | Callback function for refresh action |
Control page management using the pagination
prop:
<ReactScrollPagify
// ...other props
pagination={{
page: currentPage,
totalPage: totalPages,
}}
>
{/* Your content */}
</ReactScrollPagify>
Customize the scroll container:
<ReactScrollPagify
styleRootElement={{ height: "400px", overflowY: "auto" }}
rootClassName="custom-scrollify-container"
rootElementId="my-scrollify-container"
>
{/* Your content */}
</ReactScrollPagify>
Enable pull-to-refresh functionality:
<ReactScrollPagify
enablePulling={true}
pulingOptions={{ position: 60 }}
onRefresh={handleRefresh}
>
{/* Your content */}
</ReactScrollPagify>
const [data, setData] = useState([]);
const [page, setPage] = useState(1);
const [totalPages, setTotalPages] = useState(1);
const fetchData = async (page) => {
const response = await fetch(`https://api.example.com/data?page=${page}`);
const { results, total_pages } = await response.json();
setData((prevData) => [...prevData, ...results]);
setTotalPages(total_pages);
};
const handlePageChange = (newPage) => {
setPage(newPage);
fetchData(newPage);
};
return (
<ReactScrollPagify
data={data}
onChangePage={handlePageChange}
pagination={{ page, totalPage: totalPages }}
isLoading={isLoading}
loadingOverlay={<div>Loading...</div>}
>
{/* You have to make component with data props. without data props it will not work */}
<YourListComponent data={[]} />
</ReactScrollPagify>
);
<ReactScrollPagify
threshold={100}
enableLoadMoreButton={true}
onChangePage={handlePageChange}
// ...other props
>
{/* Your content */}
{isLastPage && <div>No more data to load</div>}
</ReactScrollPagify>
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License.