react-bootstrap-pagination-control

This component automatically controls the pagination display.


Keywords
react, react-bootstrap, bootstrap, pagination-control, pagination, control
License
MIT
Install
npm install react-bootstrap-pagination-control@1.0.5

Documentation

React Bootstrap Pagination Control

This component automatically controls the pagination display.

Install

npm install react-bootstrap-pagination-control

Options

Options

Usage

Component usage example.

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)
    }}
    ellipsis={1}
  />
}

You can see a interative component in Storybook.

Props

PaginationControl

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 number => any page => console.log(page) 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