Skip to main content

usePagination

The usePagination hook provides the pagination links (i.e., next/prev) of a search result. You can use the rel="next" and rel="prev" links along with the <link /> tag to add navigation buttons to your search result pages.

Import​

import { usePagination } from '@faststore/sdk'

Usage​

function Component () {
  const totalProducts = 100
  const { next, prev } = usePagination(totalProducts)

  return (
    <>
      {prev && <a href={prev.link}>Previous Page</a>}
      {next && <a href={next.link}>Next Page</a>}
    </>
  )
}

Props​

number
Description

Total number of products returned by the search query.

Return​

prev{ cursor: number; link: string} | false
Description

Cursor position and corresponding link for the previous page of the search result.

next{ cursor: number; link: string} | false
Description

Cursor position and corresponding link for the next page of the search result.

ON THIS PAGE