# paginoid

> Pagination ReactJS component.

Latest version **2.0.1** (published 2021-07-03) · CC0-1.0 license · 0 weekly downloads

## Install

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

## Health

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

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

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2021-07-03 |
| First published | 2021-05-23 |
| Weekly downloads | 0 |
| License | CC0-1.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Potapenko Vadim |
| Maintainers | potapenko |
| Keywords | react-component, paginate, paginator, pagination |

## Links

- npm: https://www.npmjs.com/package/paginoid
- Repository: https://github.com/PotapenkoVadim/paginoid
- Homepage: https://github.com/PotapenkoVadim/paginoid#readme
- Issues: https://github.com/PotapenkoVadim/paginoid/issues
- npm.io page: https://npm.io/package/paginoid

## Recent versions

- 2.0.1 (latest) — 2021-07-03
- 2.0.0 — 2021-07-03
- 1.0.10 — 2021-06-11
- 1.0.9 — 2021-06-11
- 1.0.8 — 2021-06-11
- 1.0.7 — 2021-06-11
- 1.0.6 — 2021-06-11
- 1.0.5 — 2021-06-11
- 1.0.4 — 2021-05-31
- 1.0.3 — 2021-05-30
- 1.0.2 — 2021-05-24
- 1.0.1 — 2021-05-23
- 1.0.0 — 2021-05-23

## README

# Paginoid
[![npm version](https://badge.fury.io/js/paginoid.svg)](https://www.npmjs.com/package/paginoid) [![](https://data.jsdelivr.com/v1/package/npm/paginoid/badge)](https://www.jsdelivr.com/package/npm/paginoid) [![Package Quality](https://packagequality.com/shield/paginoid.svg)](https://packagequality.com/#?package=paginoid)

![](/paginoid.PNG)

A ReactJS dumb component to render a pagination. 
  - a small function
  - implemented in `typescript`
  - ***no dependencies***


## Installation
```bash
    #npm
    $ npm install paginoid
    
    #yarn
    $ yarn add paginoid
```


## Usage

```js
import React from 'react';
import Paginoid from 'paginoid';

export const App = (): JSX.Element => {
  const [currentPage, setCurrentPage] = useState(1);
  const handleChange = (page: number) => setCurrentPage(page);

  return (
    <div className='app'>
      <Paginiod
        currentPage={currentPage}
        total={150}
        perPage={3}
        handleChange={handleChange}

        prevButtonTitle={<span>{'<'}</span>}
        nextButtonTitle={<span>{'>'}</span>}

        containerClassName={'pagination'}
        arrowsClassName={'pagination_arrows'}
        itemsClassName={'pagination_item'}
        activeItemClassName={'pagination_item__active'}
        disabledArrowClassName={'pagination_arrows__disable'}
      />
    </div>
  );
};

```


## Params
  * **`currentPage`: number *(required)*;**
  * **`total`: number *(required) - total items*;**
  * **`perPage`: number *(required) - items per page*;**
  * **`handleChange`: (currentPage: number) => void *(required)*;**
  * prevButtonTitle?: ReactNode;
  * nextButtonTitle?: ReactNode;
  * containerClassName?: string;
  * arrowsClassName?: string;
  * itemsClassName?: string;
  * activeItemClassName?: string;
  * disabledArrowClassName?: string;

***[Watch Demo](https://potapenkovadim.github.io/paginoid/storybook-static/)***

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