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