# super-pager

> All in one pagination solution

Latest version **1.0.3** (published 2023-03-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install super-pager
pnpm add super-pager
yarn add super-pager
bun add super-pager
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2023-03-06 |
| First published | 2023-02-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 90.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | bydata |

## Links

- npm: https://www.npmjs.com/package/super-pager
- npm.io page: https://npm.io/package/super-pager

## Dependencies (2)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.16.7
- [next-transpile-modules](https://npm.io/package/next-transpile-modules.md) ^9.0.0

## Recent versions

- 1.0.3 (latest) — 2023-03-06
- 1.0.2 — 2023-03-01
- 1.0.1 — 2023-02-28
- 1.0.0 — 2023-02-28

## README

# 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

```javascript
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

```javascript
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

```javascript
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

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

---
_Source: https://npm.io/package/super-pager · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._