React Hooks Paginator

TYPESCRIPT FORK FROM https://www.npmjs.com/package/react-hooks-paginator

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

Requires react >= 18.2.0

Installation

Run the following command: npm install @camilomontoyau/react-hooks-paginator

Usage

1import React, { useState } from 'react';
2import ReactDOM from 'react-dom';
3import Paginator from '@camilomontoyau/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;