React-scroll-pagify NPM

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.

Installation

Install the package using npm or yarn:

npm i react-scroll-pagify

yarn add react-scroll-pagify

Basic Usage

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>
  );
};

Props

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

Pagination

Control page management using the pagination prop:

<ReactScrollPagify
  // ...other props
  pagination={{
    page: currentPage,
    totalPage: totalPages,
  }}
>
  {/* Your content */}
</ReactScrollPagify>

Customization

Styling

Customize the scroll container:

<ReactScrollPagify
  styleRootElement={{ height: "400px", overflowY: "auto" }}
  rootClassName="custom-scrollify-container"
  rootElementId="my-scrollify-container"
>
  {/* Your content */}
</ReactScrollPagify>

Pull-to-Refresh

Enable pull-to-refresh functionality:

<ReactScrollPagify
  enablePulling={true}
  pulingOptions={{ position: 60 }}
  onRefresh={handleRefresh}
>
  {/* Your content */}
</ReactScrollPagify>

Examples

Paginating API Data

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>
);

Custom Scrolling Behavior

<ReactScrollPagify
  threshold={100}
  enableLoadMoreButton={true}
  onChangePage={handlePageChange}
  // ...other props
>
  {/* Your content */}
  {isLastPage && <div>No more data to load</div>}
</ReactScrollPagify>