Bootstrap powered pagination component

Usage no npm install needed!

<script type="module">
  import onaioPagination from 'https://cdn.skypack.dev/@onaio/pagination';



This package provides a number of Pagination components that you can use to split huge data sets into smaller data chunks

usePagination Hook

this hook provides the essential logic needed in managing the state of any pagination use-case.


yarn add @onaio/pagination


UsePagination makes use of the following props

  • totalRecords:(number)
    • required
    • the total numnber of records to be paginated
  • pageSize:(number)
    • required
    • the number of records in a single page
  • reducer:(redux-styled reducer function)
  • initialState:(< generic >)
    • optional
    • any object passed as an initial state is spread over the default initial state before doing anything else.

Paginator Code example

Here is a code sandbox showing how this hook could be used to create a bootstrap-powered pagination component

Exposed API

  1. paginationState: the pagination state:
  • currentPage
  • pageSize
  • pagesToBeDisplayed
  • totalPages
  • totalRecords

PS: One can override the above exposed variables via the initial state or using their own custom reducer. due to this dynamic nature the pagination state is not guaranteed to always be as shown above.

  1. nextPage: increments the currentPage counter by one
  2. firstPage: goes to the first page
  3. lastPage: goes to the last page
  4. goToPage: takes to arbitrary page
  5. previousPage: decrements the currentPage counter by one
  6. dispatch: The base dispatch method, the above helper functions are wrapper functions around this, use this to dispatch custom actions if any
  7. canNextPage: can i go to the nextPage?, is there a nextPage?
  8. canPreviousPage: can i go to the previousPage?, is there a previousPage?