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.

Table of Contents

• Installation
• Basic Usage
• Props
• Pagination
• Customization
• Examples
• Contributing
• License

Installation

Install the package using npm or yarn:

npm i react-scroll-pagify

or

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>

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.