# reactpagetastic

> A simple pagination component for React

Latest version **1.0.2** (published 2023-09-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install reactpagetastic
pnpm add reactpagetastic
yarn add reactpagetastic
bun add reactpagetastic
```

## Health

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

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

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2023-09-22 |
| First published | 2023-09-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 37.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Izzat Haikal |
| Maintainers | izzathaikal |
| Keywords | react, pagination, component, react-component, react-paginate, react-paginate-component, react pagination |

## Links

- npm: https://www.npmjs.com/package/reactpagetastic
- Repository: https://github.com/IzzatHaikal/ReactPageTastic
- Homepage: https://github.com/IzzatHaikal/ReactPageTastic#readme
- Issues: https://github.com/IzzatHaikal/ReactPageTastic/issues
- npm.io page: https://npm.io/package/reactpagetastic

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2023-09-22
- 1.0.1 — 2023-09-22
- 0.1.15 — 2023-09-18
- 0.1.14 — 2023-09-18
- 0.1.13 — 2023-09-18
- 0.1.12 — 2023-09-15
- 0.1.11 — 2023-09-15
- 0.1.10 — 2023-09-15
- 0.1.9 — 2023-09-15
- 0.1.8 — 2023-09-15
- 0.1.7 — 2023-09-15
- 0.1.6 — 2023-09-15
- 0.1.5 — 2023-09-15
- 0.1.4 — 2023-09-15
- 0.1.3 — 2023-09-15
- … 3 more at https://npm.io/package/reactpagetastic/versions

## README

# ReactPageTastic
[![NPM](https://nodei.co/npm/reactpagetastic.png)](https://nodei.co/npm/reactpagetastic/)

A simple pagination component for React.

## Installation
```npm i reactpagetastic```

## Usage

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import ReactPageTastic from 'reactpagetastic';
import "reactpagetastic/dist/pagetastic.css"; // Import the CSS

const [currentPage, setCurrentPage] = React.useState(1);

const App = () => {
  return (
    <div>
      <ReactPageTastic
        totalCount={100}
        pageSize={10}
        currentPage={currentPage}
        onPageChange={(page) => setCurrentPage(page)}
      />
    </div>
  );
};

ReactDOM.render(<App />, document.querySelector('#root'));
```

## Props

| Prop              | Type          | Description                                                                              |
| ----------------- | ------------- | ---------------------------------------------------------------------------------------- |
| `onPageChange`    | `Function`    | Function to call when page is changed                                                    |
| `totalCount`      | `Number`      | Total number of items                                                                    |
| `siblingCount`    | `Number`      | Number of siblings to show (optional, default is 1)                                      |
| `currentPage`     | `Number`      | Current page                                                                             |
| `pageSize`        | `Number`      | Number of items per page                                                                 |
| `classNamePrefix` | `String`      | To override all pagination styling (optional,  default is empty string)                  |
| `leftArrow`       | `JSX.Element` | To override left arrow (optional)                                                        |
| `rightArrow`      | `JSX.Element` | To override right arrow (optional)                                                       |

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