# react-hooks-paginator

> A package for adding paginator functionality to react apps

Latest version **0.5.4** (published 2025-08-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-hooks-paginator
pnpm add react-hooks-paginator
yarn add react-hooks-paginator
bun add react-hooks-paginator
```

## Health

**Score 50/100 (C)** — status: stable.

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

Warnings: low downloads; pre 1.0.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 0.5.4 |
| Published | 2025-08-22 |
| First published | 2019-03-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 109.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18 |
| Author | Nwakwoke Patrick |
| Maintainers | emekadev |
| Keywords | react, paginate, page, pagination, paginator |

## Links

- npm: https://www.npmjs.com/package/react-hooks-paginator
- Repository: https://github.com/codenaz/react-paginator
- Homepage: https://github.com/codenaz/react-paginator#readme
- Issues: https://github.com/codenaz/react-paginator/issues
- npm.io page: https://npm.io/package/react-hooks-paginator

## 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

- 0.5.4 (latest) — 2025-08-22
- 0.5.3 — 2024-08-16
- 0.5.2 — 2024-08-16
- 0.5.1 — 2023-03-05
- 0.5.0 — 2021-09-22
- 0.4.4 — 2020-02-24
- 0.4.3 — 2020-01-21
- 0.4.2 — 2020-01-21
- 0.4.1 — 2020-01-21
- 0.4.0 — 2019-09-09
- 0.3.0 — 2019-08-28
- 0.2.0 — 2019-03-22
- 0.1.2 — 2019-03-13
- 0.1.1 — 2019-03-13
- 0.1.0 — 2019-03-13

## README

# React Hooks Paginator

![Build](https://github.com/codenaz/react-paginator/actions/workflows/create-release.yaml/badge.svg?branch=main)

A library for adding simple paginator functionality to your react app.

Requires react >= 16.8.0

## Installation

Run the following command:
`npm install react-hooks-paginator`

## Usage

```javascript
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import Paginator from 'react-hooks-paginator';

function App() {
  const [offset, setOffset] = useState(0);
  const [currentPage, setCurrentPage] = useState(1);

  const data = [page1, page2, page3, page4, page5, page6];

  return (
    <div>
      <Paginator
        totalRecords={data.length}
        pageLimit={4}
        pageNeighbours={1}
        setOffset={setOffset}
        currentPage={currentPage}
        setCurrentPage={setCurrentPage}
      />
    </div>
  );
}

export default App;
```

## Props

| Property           | Type                | Default                 | Description                                                    |
| ------------------ | ------------------- | ----------------------- | -------------------------------------------------------------- |
| totalRecords       | Number (required)   |                         | The length of the data we are tabulating                       |
| pageLimit          | Number (required)   |                         | Minimum number of records per page                             |
| pageNeighbours     | Number (required)   |                         | Number of page blocks by the left and right of the middle page |
| setOffset          | function (required) |                         | function that updates the offset state                         |
| setCurrentPage     | function (required) |                         | function that updates the current page state                   |
| currentPage        | Number (required)   |                         | The current page state                                         |
| pageContainerClass | String              | `react-hooks-paginator` | Paginator container classname                                  |
| pageActiveClass    | String              | `active`                | Active page item classname                                     |
| pageItemClass      | String              | `page-item`             | Page item classname                                            |
| pageLinkClass      | String              | `page-link`             | Page link classname                                            |
| pagePrevText       | String or Node      | `Next »`                | Prev page item text                                            |
| pageNextText       | String or Node      | `« Prev`                | Next page item text                                            |
| pagePrevClass      | String              | `page-link`             | Prev page custom class                                         |
| pageNextClass      | String              | `next-link`             | Next page custom class                                         |

## Example

```javascript
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import Paginator from 'react-hooks-paginator';
import { fetchData } from './data-fetcher';

function App() {
  const pageLimit = 10;

  const [offset, setOffset] = useState(0);
  const [currentPage, setCurrentPage] = useState(1);
  const [data, setData] = useState([]);
  const [currentData, setCurrentData] = useState([]);

  useEffect(() => {
    fetchData().then(data => setData(data));
  }, []);

  useEffect(() => {
    setCurrentData(data.slice(offset, offset + pageLimit));
  }, [offset, data]);

  return (
    <div>
      <ul>
        {currentData.map(data => (
          <li>{data}</li>
        ))}
      </ul>
      <Paginator
        totalRecords={data.length}
        pageLimit={pageLimit}
        pageNeighbours={2}
        setOffset={setOffset}
        currentPage={currentPage}
        setCurrentPage={setCurrentPage}
      />
    </div>
  );
}

export default App;
```

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