npmpackage.info

Gathering detailed insights and metrics for react-hooks-paginator

Other packages similar to react-hooks-paginator

@camilomontoyau/react-hooks-paginator

0.7.5

A package for adding paginator functionality to react apps (typescript fork

react-paginator-hook

1.0.1

A simple react hook for helping in pagination

react-hooks-paginator-fixed

0.5.4

A package for adding paginator functionality to react apps

react-use-paginator

1.3.2

A simple yet configurable react hook for pagination. Functionally developed with hooks.

Gathering detailed insights and metrics for react-hooks-paginator

react-hooks-paginator - 0.5.3 | npmpackage.info

react-hooks-paginator

A simple react data paginator

0.5.3

MIT

HTML

109.77 kB

2.9

Installations

npm install react-hooks-paginator

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

16.20.2

NPM Version

8.19.4 Pull Requests

Open

1

Total

70

Closed

27

Merged

42

Issues

Open

0

Total

7

Closed

7

Releases

v0.5.3

Updated on Aug 16, 2024

v0.5.2

Updated on Aug 16, 2024

v0.5.1

Updated on Mar 05, 2023

Reduce app bundle size

0.4.2

Updated on Jan 21, 2020

Custom class for next and previous button

v0.4.0

Updated on Sep 09, 2019

Add custom styles with option to customise

v0.3.0

Updated on Aug 28, 2019

View All 6 releases

Languages

HTML

JavaScript

SCSS

Shell

HTML (90.54%)

JavaScript (8.7%)

SCSS (0.69%)

Shell (0.07%)

Developer

codenaz

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

19 Stars

102 Commits

8 Forks

2 Watchers

13 Branches

2 Contributors

Updated on Jul 07, 2025

Maintainers

View All 2 Contributors

Package Meta Information

Latest Version

0.5.3

Package Id

react-hooks-paginator@0.5.3

Unpacked Size

109.77 kB

Size

25.29 kB

File Count

NPM Version

8.19.4

Node Version

16.20.2

Published on

Aug 16, 2024

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

React Hooks Paginator

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

1import React, { useState } from 'react';
2import ReactDOM from 'react-dom';
3import Paginator from 'react-hooks-paginator';
4
5function App() {
6  const [offset, setOffset] = useState(0);
7  const [currentPage, setCurrentPage] = useState(1);
8
9  const data = [page1, page2, page3, page4, page5, page6];
10
11  return (
12    <div>
13      <Paginator
14        totalRecords={data.length}
15        pageLimit={4}
16        pageNeighbours={1}
17        setOffset={setOffset}
18        currentPage={currentPage}
19        setCurrentPage={setCurrentPage}
20      />
21    </div>
22  );
23}
24
25export 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

1import React, { useState, useEffect } from 'react';
2import ReactDOM from 'react-dom';
3import Paginator from 'react-hooks-paginator';
4import { fetchData } from './data-fetcher';
5
6function App() {
7  const pageLimit = 10;
8
9  const [offset, setOffset] = useState(0);
10  const [currentPage, setCurrentPage] = useState(1);
11  const [data, setData] = useState([]);
12  const [currentData, setCurrentData] = useState([]);
13
14  useEffect(() => {
15    fetchData().then(data => setData(data));
16  }, []);
17
18  useEffect(() => {
19    setCurrentData(data.slice(offset, offset + pageLimit));
20  }, [offset, data]);
21
22  return (
23    <div>
24      <ul>
25        {currentData.map(data => (
26          <li>{data}</li>
27        ))}
28      </ul>
29      <Paginator
30        totalRecords={data.length}
31        pageLimit={pageLimit}
32        pageNeighbours={2}
33        setOffset={setOffset}
34        currentPage={currentPage}
35        setCurrentPage={setCurrentPage}
36      />
37    </div>
38  );
39}
40
41export default App;

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

4

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.9

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to react-hooks-paginator

Other packages similar to react-hooks-paginator

react-hooks-paginator

Installations

Developer Guide

Yes

ESM

16.20.2

8.19.4

Pull Requests

1

70

27

42

Issues

0

7

7

Releases

Languages

Developer

codenaz

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

React Hooks Paginator

Installation

Usage

Props

Example

10

10

10

4

0

0

0

0

0

0

0

0

0

2.9

/10