react-bootstrap-4-pagination

A React component to render and manage Bootstrap 4 pagination quickly and easily.

Your project must have Bootstrap 4 in order to properly render the component

Check Live example

Installation

Install react-bootstrap-4-pagination with npm:

$ npm install react-bootstrap-4-pagination

Usage

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

With href

import React from 'react';
import Pagination from 'react-bootstrap-4-pagination';

let paginationConfig = {
  totalPages: 22,
  currentPage: 15,
  showMax: 5,
  size: "lg",
  threeDots: true,
  prevNext: true,
  href: 'https://example.com/items?page=*', // * will be replaced by the page number
  pageOneHref: 'https://example.com/items',
  borderColor: 'red',
  activeBorderColor: 'black',
  activeBgColor: 'grey',
  disabledBgColor: 'red',
  activeColor: 'red',
  color: 'purple',
  disabledColor: 'green',
  circle: true,
  shadow: true
};

function App() {
  return (
    <div className="App">
      <Pagination {...paginationConfig} />
    </div>
  );
}

export default App;

With function

import React from 'react';
import Pagination from 'react-bootstrap-4-pagination';

let paginationConfig = {
  totalPages: 7,
  currentPage: 3,
  showMax: 5,
  size: "lg",
  threeDots: true,
  prevNext: true,
  onClick: function (page) {
     console.log(page);
   }
};

function App() {
  return (
    <div className="App">
      <Pagination {...paginationConfig} />
    </div>
  );
}

export default App;

Params

Name	Type	Default	Description
totalPages	Number		Required. Total number of pages.
currentPage	Number	1	Current page
showMax	Number	5	Total page items to display excluding navigation blocks (prev, next, first, last pages)
onClick	Function		Page item click handler. Receive pageNumber as arg. If you pass onClick prop, href prop will stop having effect
size	String	md	Pagination component size. Options: sm lg
prevNext	Boolean	true	Set to false if you don't want to show next and prev navigation buttons
firstLast	Boolean	false	Set to true if you want to show first and last navigation buttons
prevText	String	⟨	Text of prev page navigation button
nextText	String	⟩	Text of prev page navigation button
firstText	String	⟨⟨	Text of first page navigation button
lastText	String	⟩⟩	Text of last page navigation button
href	String		Href template. Example: https://example.com/items?page=*&sessionId=Khf3124nfj * will be replaced by the page item number
pageOneHref	String		Href template for first page. Example: https://example.com/items?sessionId=Khf3124nfj if pageOneHref is not set, page one links will have the href template
threeDots	Boolean	false	Set to trueif you want to show Ellipsis items
activeClass	String	active	Class name of active <li> tag
disabledClass	String	disabled	Class name of the first, previous, next and last <li> tags when disabled
center	Boolean	true	Set to false if you don't whant to center pagination items
activeBgColor	String	Bootstrap default	background-color: of active class page items
activeBorderColor	String	Bootstrap default	border-color: of active class page items
activeColor	String	Bootstrap default	color: (font color) of active class page items
disabledBgColor	String	Bootstrap default	background-color: of disabled class page items
disabledBorderColor	String	Bootstrap default	border-color: of disabled class page items
disabeldColor	String	Bootstrap default	color: (font color) of disabled class page itmes
bgColor	String	Bootstrap default	background-color: of page items that don't have active or disabled class
borderColor	String	Bootstrap default	border-color: of page items that don't have active or disabled class
color	String	Bootstrap default	color: (font color) of page items that don't have active or disabled class
circle	Boolean	false	Set to true if you want circular page items
shadow	Boolean	false	Set to true if you want shadow on page items
ariaLabel	String	Page navigator	aria-label text of nav element

License

MIT