Pager

Pagers allow users to navigate through items of the same table or list.

Installation

To install @igloo-ui/pager in your project, you will need to run the following command using npm:

npm install @igloo-ui/pager

If you prefer Yarn, use the following command instead:

yarn add @igloo-ui/pager

Usage

Then to use the component in your code just import it!

import Pager from '@igloo-ui/pager';

const [currentPage, setCurrentPage] = React.useState(1);
<Pager
  pageSize={5}
  totalCount={200}
  currentPage={currentPage}
  onPageChange={(page) => setCurrentPage(page)}
/>;

API

Pager

PropTypeDescription
classNamestringAdd a specific class to the pager component
currentPagenumberThe number of the currently active page
dataTeststringAdd a data-test tag for automated tests
onPageChange(pageNum: number) => voidCalled when the page is changed.
pageSizenumberSpecify the number of elements each page should contain
siblingCountnumberRepresents how many pages should be on each side of the current page.
totalCountnumberThe total amount of elements

usePagination

PropTypeDescription
currentPagenumberThe number of the currently active page
pageSizenumberThe number of elements each page should contain
siblingCountnumberRepresents how many pages should be on each side of the current page.
totalCountnumberThe total amount of elements