Pager
Pagers allow users to navigate through items of the same table or list.
Version 2.0.0
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, 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)}
  />
Internationalization
The Pager component uses the @igloo-ui/provider package to receive the correct locale. This should be wrapped around the entire application.
import IglooProvider from '@igloo-ui/provider';
<IglooProvider locale="fr-CA">
  <Pager
    pageSize={5}
    totalCount={200}
    currentPage={currentPage}
    onPageChange={(page) => setCurrentPage(page)}
  />
</IglooProvider>
API
Pager
| Prop | Type | Default | Description | 
|---|---|---|---|
 className | string | - | Add a specific class to the pager component | 
 currentPage | number | - | The number of the currently active page | 
 dataTest | string | - | Add a data-test tag for automated tests | 
 onPageChange | (pageNum: number) => void | - | Called when the page is changed | 
 pageSize | number | - | Specify the number of elements each page should contain | 
 showValueLabel | boolean | Whether or not to show the text to the right of the pager | |
 siblingCount | number | Represents how many pages should be on each side of the current page | |
 totalCount | number | - | The total amount of elements | 
 valueLabel | ReactNode | - | The label to show on the right of the pager | 
usePagination
| Prop | Type | Default | Description | 
|---|---|---|---|
 currentPage | number | - | The number of the currently active page | 
 pageSize | number | - | The number of elements each page should contain | 
 siblingCount | number | - | Represents how many pages should be on each side of the current page. | 
 totalCount | number | - | The total amount of elements |