# react-pagination-ts

> ## Installation

Latest version **0.1.8** (published 2023-11-26) · 0 weekly downloads

## Install

```sh
npm install react-pagination-ts
pnpm add react-pagination-ts
yarn add react-pagination-ts
bun add react-pagination-ts
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.8 |
| Published | 2023-11-26 |
| First published | 2023-11-22 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 518.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | nakel |
| Keywords | react-component, paginate, paginator, pagination, react pagination |

## Links

- npm: https://www.npmjs.com/package/react-pagination-ts
- npm.io page: https://npm.io/package/react-pagination-ts

## Dependencies (4)

- [clsx](https://npm.io/package/clsx.md) ^2.0.0
- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [tailwind-merge](https://npm.io/package/tailwind-merge.md) ^2.0.0

## Recent versions

- 0.1.8 (latest) — 2023-11-26
- 0.1.7 — 2023-11-26
- 0.1.6 — 2023-11-26
- 0.1.5 — 2023-11-25
- 0.1.4 — 2023-11-25
- 0.1.3 — 2023-11-25
- 0.1.2 — 2023-11-22
- 0.1.1 — 2023-11-22
- 0.1.0 — 2023-11-22
- 0.0.9 — 2023-11-22
- 0.0.8 — 2023-11-22
- 0.0.7 — 2023-11-22
- 0.0.6 — 2023-11-22
- 0.0.5 — 2023-11-22

## README

# React Pagination TS

## Installation

Install `react-pagination-ts` with [npm](https://www.npmjs.com/):

```
npm install react-pagination-ts --save
```

## Usage

```typescript
import { useEffect, useState } from "react";
import { Pagination } from "react-pagination-ts";

function App() {
  const [page, setPage] = useState(1);
  const handlePageClick = (_, newPage: number) => {
    setPage(newPage);
  };

  return (
    <>
      <Pagination
        currentPage={page}
        defaultPage={1}
        onPageChange={handlePageClick}
        pageCount={30}
      />
    </>
  );
}

export default App;
```

## Props

| Name             | Type      | default | Description                                                       |
| ---------------- | --------- | ------- | ----------------------------------------------------------------- |
| `totalPage`      | `Number`  | 1       | **Required.** The total number of pages.                          |
| `defaultPage`    | `Number`  | 1       | The page selected by default when the component is uncontrolled.  |
| `currentPage`    | `Number`  | 1       | The current page.                                                 |
| `siblingCount`   | `Number`  | 1       | Number of always visible pages before and after the current page. |
| `boundaryCount`  | `Number`  | 1       | Number of always visible pages at the beginning and end.          |
| `disabled`       | `Boolean` | false   | If `true`, the component is disabled.                             |
| `hideNextButton` | `Boolean` | false   | If `true`, hide the next-page button.                             |
| `hidePrevButton` | `Boolean` | false   | If `true`, previous-page button.                                  |

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