replace-js-pagination

A ReactJS component to render a pagination.

The component comes with no built-in styles. HTML layout compatible with Bootstrap 3 pagination stylesheets.

If you would like it to work for Bootstrap 4, you will need to define your own css styling or to add 2 additional props when using this component:

itemClass="page-item"
linkClass="page-link"

• NOTE: This component was derived from react-js-pagination, which apparently is no longer maintained for longer than 2 years and has a high risk vulnerability as reported by "npm audit" related to tar dependency. This dependency has been removed in this "replace-js-pagination"

Installation

Install replace-js-pagination with npm:

$ npm install replace-js-pagination

Usage

Very easy to use. Just provide props with total amount of things that you want to display on the page.

1import 'bootstrap/dist/css/bootstrap.min.css';
2
3import React, { useState } from "react";
4
5import { Row, Container } from "react-bootstrap";
6import Pagination from "replace-js-pagination";
7
8const App = () => {
9    const [activePage, setActivePage] = useState(16);
10
11    const handlePageChange = (pageNumber) => {
12        setActivePage(pageNumber);
13    };
14    return (
15        <>
16            <Container>
17                <Row>
18                    <h1>Testing pagination: Page: {activePage} </h1>
19                </Row>
20                <Row>
21                    <Pagination
22                        itemClass="page-item"
23                        linkClass="page-link"
24                        activePage={activePage}
25                        itemsCountPerPage={10}
26                        totalItemsCount={450}
27                        pageRangeDisplayed={5}
28                        onChange={handlePageChange}
29                    />
30                </Row>
31            </Container>
32        </>
33    );
34};
35
36export default App;
37
38

A small example is provided here: https://codesandbox.io/s/replace-js-pagination-276mpq?file=/src/App.js

Params

Name	Type	Default	Description
totalItemsCount	Number		Required. Total count of items which you are going to display
onChange	Function		Required. Page change handler. Receive pageNumber as arg
activePage	Number	1	Required. Active page
itemsCountPerPage	Number	10	Count of items per page
pageRangeDisplayed	Number	5	Range of pages in paginator, exclude navigation blocks (prev, next, first, last pages)
prevPageText	String / ReactElement	⟨	Text of prev page navigation button
firstPageText	String / ReactElement	«	Text of first page navigation button
lastPageText	String / ReactElement	»	Text of last page navigation button
nextPageText	String / ReactElement	⟩	Text of next page navigation button
getPageUrl	Function		Generate href attribute for page
innerClass	String	pagination	Class name of <ul> tag
activeClass	String	active	Class name of active <li> tag
activeLinkClass	String		Class name of active <a> tag
itemClass	String		Default class of the <li> tag
itemClassFirst	String		Class of the first <li> tag
itemClassPrev	String		Class of the previous <li> tag
itemClassNext	String		Class of the next <li> tag
itemClassLast	String		Class of the last <li> tag
disabledClass	String	disabled	Class name of the first, previous, next and last <li> tags when disabled
hideDisabled	Boolean	false	Hide navigation buttons (prev, next, first, last) if they are disabled.
hideNavigation	Boolean	false	Hide navigation buttons (prev page, next page)
hideFirstLastPages	Boolean	false	Hide first/last navigation buttons
linkClass	String		Default class of the <a> tag
linkClassFirst	String		Class of the first <a> tag
linkClassPrev	String		Class of the previous <a> tag
linkClassNext	String		Class of the next <a> tag
linkClassLast	String		Class of the last <a> tag