# react-responsive-pagination-component

> Responsive Pagination for react

Latest version **0.0.2** (published 2022-04-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-responsive-pagination-component
pnpm add react-responsive-pagination-component
yarn add react-responsive-pagination-component
bun add react-responsive-pagination-component
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2022-04-12 |
| First published | 2022-04-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 13 |
| Unpacked size | 19.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | liasqui |
| Maintainers | liasqui |
| Keywords | pagination, react, responsive pagination |

## Links

- npm: https://www.npmjs.com/package/react-responsive-pagination-component
- Homepage: https://github.com/SeongsangCHO/pagination
- Issues: https://github.com/SeongsangCHO/pagination/issues
- npm.io page: https://npm.io/package/react-responsive-pagination-component

## Dependencies (13)

- [react](https://npm.io/package/react.md) ^18.0.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.0.0
- [typescript](https://npm.io/package/typescript.md) ^4.6.3
- [web-vitals](https://npm.io/package/web-vitals.md) ^2.1.4
- [@types/jest](https://npm.io/package/@types/jest.md) ^27.4.1
- [@types/node](https://npm.io/package/@types/node.md) ^16.11.26
- [@types/react](https://npm.io/package/@types/react.md) ^17.0.43
- [react-scripts](https://npm.io/package/react-scripts.md) 5.0.0
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^17.0.14
- [styled-components](https://npm.io/package/styled-components.md) ^5.3.5
- [@types/lodash.debounce](https://npm.io/package/@types/lodash.debounce.md) ^4.0.6
- [@types/styled-components](https://npm.io/package/@types/styled-components.md) ^5.1.24

## Recent versions

- 0.0.2 (latest) — 2022-04-12
- 0.0.1 — 2022-04-12

## README

# react-responsive-pagination-component

---

![example](https://user-images.githubusercontent.com/55486644/162971856-15326070-22f0-4a7b-91c6-890c36f30881.gif)




## Usage

```tsx
import React, { useState } from "react";
import { Pagination, usePagination } from "react-responsive-pagination-hook";

function App() {
  const DATA = Array(20)
    .fill({})
    .map((_, index) => ({
      id: index,
      name: `SECHO-${index}`,
    }));
  const [data, setData] = useState([...DATA]);
  const { handlePageClick, totalPageCount, currPageNum, displayData } =
    usePagination({
      data: data,
      delay: 0,
      resize: true,
      responsiveOption: {
        breakPoint: 768,
        delay: 200,
        breakPointUnderViewCount: 6,
        breakPointOverViewCount: 10,
      },
    });
  const handleDelete = (e: any) => {
    const { id } = e.target.dataset;
    setData([...data.filter((item) => item.id != id)]);
  };
  return (
    <div className="App">
      <div>
        {displayData.map((item: any, _: number) => (
          <div key={item.id}>
            <span>{item.name}</span>
            <button onClick={handleDelete} data-id={item.id}>
              X
            </button>
          </div>
        ))}
      </div>
      <Pagination {...{ totalPageCount, currPageNum, handlePageClick, data }} />
    </div>
  );
}
```







## Hook Props

---

| Parameter        | Description               | Type       | Default |
| ---------------- | ------------------------- | ---------- | ------- |
| data             | Total data                | array<any> | []      |
| resize           | set resize option         | boolean    | False   |
| delay            | Debounce delay for resize | Number     | 0       |
| responsiveOption | Object                    | array<any> | []      |



### responsiveOption Props

---

| Parameter                | Description                                                | Type       | Default |
| ------------------------ | ---------------------------------------------------------- | ---------- | ------- |
| breakPoint               | Responsive break point width px                            | array<any> | []      |
| breakPointUnderViewCount | Number of items displayed when less than the breakpoint    | Number     | 6       |
| breakPointOverViewCount  | Number of items displayed when greater than the breakpoint | Number     | 10      |







## Pagination Component Props

---

| Parameter       | Description          | Type                 | Default |
| --------------- | -------------------- | -------------------- | ------- |
| totalPageCount  | total page count     | number               | -       |
| currPageNum     | current page number  | number               | -       |
| handlePageClick | Page change callback | Function(pageNumber) |         |
| data            | Total data           | array<any>           | []      |
| customStyle     | Custom style props   | Object               |         |



#### Custom Style Props

---

| Parameter             | Description                    | Type                         | Default    |
| --------------------- | ------------------------------ | ---------------------------- | ---------- |
| buttonBgColor         | Pagination Background color    | String                       | "\#1590fe" |
| numberColor           | number color                   | String                       | "white"    |
| customLeftArrowIcon   | Arrow Icon                     | React.ReactElement \| string | "<"        |
| customLeftArrowsIcon  | Arrow Icon                     | React.ReactElement \| string | "<<"       |
| customRightArrowIcon  | Arrow Icon                     | React.ReactElement \| string |            |
| customRightArrowsIcon | Arrow Icon                     | React.ReactElement \| string | ">>"       |
| maxWidth              | pagination container max width | String                       | -          |
| margin                | pagination container margin    | String                       | -          |
| fontSize              | Font size                      | String                       | -          |

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