React Bootstrap Pagination Control

This component automatically controls the pagination display.

Install

npm install react-bootstrap-pagination-control

Options

Options

Usage

This example show a complete component usage.

PaginationControl

import 'bootstrap/dist/css/bootstrap.min.css';

import React, { useState } from 'react';
import { PaginationControl } from 'react-bootstrap-pagination-control';

export default () => {
  const [page, setPage] = useState(1)

  return <PaginationControl
    page={page}
    between={4}
    total={250}
    limit={20}
    changePage={(page) => {
      setPage(page); 
      console.log(page)
    }}
    ellipsis={1}
  />
}

Props

Name Type Default Description
page number 1 Active page
between number 3 Max itens in left and right when page is in center, it’s minimum value is 1
total number – Required. Total of itens
limit number – Required. Max itens per page
changePage Function () => {} Function that will receive the page nunber when click
next boolean true Control if prev and next actions will be displayed
last boolean false Control if fist and last actions will be displayed
ellipsis number 0 Number itens after ellipsis, its maximum value is equal (between – 2)

License

MIT

GitHub

View Github