codenaz/react-paginator

A simple react data paginator

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

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

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;