usePagination is a custom hook that provides methods for managing pagination state.


import { usePagination } from "@dwarvesf/react-hooks";

Return value#

The usePagination hook returns the result in the shape of below:

totalPage: number
pageSize: number
// initial value, but changing it will update the hook's `currentPage` return value
page: number
// go to next page, optionally taking a boolean param to decide whether to go the last page immediately
next: (toLast?: boolean) => void
// back to previous page, optionally taking a boolean param to decide whether to go back to page 1 immediately
back: (toFirst?: boolean) => void
// jump to a specific page
go: (page: number) => void
hasNextPage: boolean
hasPreviousPage: boolean


function Example() {
const { currentPage, totalPage, next, back, go, hasNextPage, hasPreviousPage } = usePagination({
pageSize: 2,
page: 1,
totalPage: 6
return (
<ul style={{listStyleType: 'none'}}>
<li>Page: {currentPage}</li>
<li>Total page: {totalPage}</li>
<li>Has next page: {String(hasNextPage)}</li>
<li>Has previous page: {String(hasPreviousPage)}</li>
<button onClick={() => next(true)}>go to last page</button>
<button onClick={() => back(true)}>go to first page</button>
<button onClick={() => next()}>next page</button>
<button onClick={() => back()}>previous page</button>


The usePagination hook accepts a param of below shape:

Edit this page

Made with ❤️ by Dwarves Foundation