Super Pager

A all-in-one library for all kind of pagination classic (with numbers), load more, and infinite scroll. It is built on React.

Features

• Navigate between the pages using buttons, input box to directly navigate to the specific page.
• Ability to choose the number of rows per page from a dropdown.
• Prevent loading all the data in one go, and load the data using load more button.
• Infinite scroll that allows new data to be displayed either based on window height or wrapper height.

Usage

import SuperPager from "../../components/SuperPager";
//props used by Pagination
<SuperPager type="infiniteScroll" />;

Props

SuperPager

| Parameter | Type | Description | | :-------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | type | String | Required. This prop is used to specify the type of component that must be rendered. The allowed Values are : "infiniteScroll" or "pagination" or "loadMore" |

Props as per chosen type

Classic Pagination

| Parameter | Type | Description | | :------------------ | :--------- | :-------------------------------------------------------------------------------------------------- | | currentPage | Number | Required. This prop is used to define the current page. | | onPageChange | Function | Required. Callback function to change the page Number | | totalRecordsCount | Number | Required. This prop is used to specify the total number of records available | | recordsPerPage | Number | This prop is used to specify the default page size that must be selected by default on the dropdown | | pageSizes | Array | This prop specifies the various options to show different page Sizes on the dropdown | | onPageSizesChange | Function | Required. Callback function that changes the number of records per page option. |

Load More

| Parameter | Type | Description | | :-------------- | :--------- | :------------------------------------------------------------------------------------------------------------------------------ | | handleClick | Function | Required. Callback function to load more data when the button is clicked | | disableButton | boolean | Required. This prop will disable the button if there is no more data to be fetched | | styles | object | Specify the styles for the button in an object format. Example {bgColor:"#000", color:"#fff", fontSize:"10px", width:"50%"} | | hoverBg | string | Background color of the load more button when it is hovered | | hoverColor | string | Color of the load more button text when it is hovered |

Infinite Scroll

| Parameter | Type | Description | | :----------- | :------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | dataLength | Number | Required. The number of records that are available on state | | loadMore | Function | Required. The callback function that triggers the api call to get the next set of records | | hasMore | boolean | Required. This prop indicates if there is still more data to be received from api | | wrapper | boolean | If this prop is set to true, and if the component is inside a wrapper that has a height and scroll property, then new data is fetched when user scrolls to the end of the wrapper. By default the user has to scroll till the end of window. | | loader | HTML or React Compponent | Dispaly a loading indicator when data is getting fetched | | children | HTML or JSX or React Component | The items that need to be rendered |

Example

Classic Pagination

import SuperPager from "../../components/SuperPager";
export const App = () => {
  return (
    <>
      <SuperPager
        type="pagination"
        currentPage={currentPage}
        onPageChange={handlePageChange}
        totalRecordsCount={posts.length}
        recordsPerPage={itemsPerPage}
        pageSizes={[5, 10, 15, 20, 30]}
        onPageSizesChange={handlePageSizesChange}
      />
    </>
  );
};

Load More

import SuperPager from "../../components/SuperPager";
export const App = () => {
return (
    <>
    <SuperPager
      handleClick={loadMore}
      disableButton={hasMore}
      styles={{
        bgColor:"grey",
        color:"skyblue",
        width:"50%",
      }}
      hoverBg="skyblue"
      hoverColor="#000"
      type="loadMore"
    />
   </>
)

Infinite Scroll

import SuperPager from "../../components/SuperPager";
export const App = () => {
return (
    <>
    <SuperPager
      type="infiniteScroll"
      dataLength={posts.length}
      loadMore={loadMore}
      hasMore={hasMore}
      children={posts.map((post) => (
        <div key={post.id} className="infi-post">
        <p>{post.body}</p>
      </div>
      ))}
    >
    </>
)