npmpackage.info

Gathering detailed insights and metrics for react-hooks-paginator

react-hooks-paginator

A simple react data paginator

0.5.3

MIT

HTML

2.07 kB

395,896 2.9

Installations

npm install react-hooks-paginator

Pull Requests

Open

6

Total

67

Closed

24

Merged

37

Issues

Open

0

Total

7

Closed

7

Releases

v0.5.3

Published on 16 Aug 2024

v0.5.2

Published on 16 Aug 2024

v0.5.1

Published on 05 Mar 2023

Reduce app bundle size

0.4.2

Published on 21 Jan 2020

Custom class for next and previous button

v0.4.0

Published on 09 Sept 2019

Add custom styles with option to customise

v0.3.0

Published on 28 Aug 2019

View all 6 releases

Developer

codenaz

Developer Guide

BETA

Module System

ESM

Min. Node Version

Typescript Support

Yes

Node Version

16.20.2

NPM Version

8.19.4 Statistics

20 Stars

97 Commits

6 Forks

3 Watching

18 Branches

2 Contributors

Updated on 04 Sept 2024

Bundle Size

5.09 kB

Minified

2.07 kB

Minified + Gzipped

Bundlephobia

Languages

HTML (90.54%)

JavaScript (8.7%)

SCSS (0.69%)

Shell (0.07%)

Total Downloads

Cumulative downloads

Total Downloads

395,896

Last day

-18.9%

554

Compared to previous day

Last week

13.4%

3,222

Compared to previous week

Last month

7.2%

12,649

Compared to previous month

Last year

10.3%

107,018

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

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

Dangerous-Workflow

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

10

Binary-Artifacts

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

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

Pinned-Dependencies

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

0

CII-Best-Practices

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

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 2024-11-25

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

react-hooks-paginator

Installations

Pull Requests

6

67

24

37

Issues

0

7

7

Releases

Developer

codenaz

Developer Guide

ESM

Yes

16.20.2

8.19.4

Statistics

Bundle Size

5.09 kB

2.07 kB

Languages

Total Downloads

395,896

Daily Downloads

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