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

); } 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 (

{data}

); } export default App; ```

react-hooks-paginator

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past