@shuplenkov/react-bootstrap-4-pagination v1.0.6

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

License

MIT