super-pager v1.0.3

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

Props as per chosen type

Classic Pagination

Load More

Infinite Scroll

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