usePagination

The usePagination hook provides the pagination links (next/prev) for navigating through search results. These links can be used with the <link /> tag to improve SEO and user experience by indicating the relationship between pages (example: rel="next" and rel="prev").

Import


_10import { usePagination } from '@faststore/sdk'

Usage

The following example demonstrates how to implement a paginated navigation system using usePagination:


_21import { usePagination } from '@faststore/sdk'
_21
_21function Component () {
_21  const totalProducts = 100 // Total number of products returned by the search query
_21  const { next, prev } = usePagination(totalProducts)
_21
_21  return (
_21    <>
_21      {prev && (
_21        <a href={prev.link} rel="prev">
_21          Previous Page
_21        </a>
_21      )}
_21      {next && (
_21        <a href={next.link} rel="next">
_21          Next Page
_21        </a>
_21      )}
_21    </>
_21  )
_21}

usePagination: Generates pagination links (next and prev) based on the total number of products in the search results.
totalProducts: Total number of products returned by the search query. This value is used to calculate the pagination links.
rel="prev" and rel="next": Help search engines understand the relationship between pages, improving SEO.

API reference

The usePagination hook returns an object containing next and prev pagination links:

Variable name	Data type	Description
`prev`	`{ cursor: number; link: string}` / `false`	Object containing the cursor position and link for the previous page of the search result. If there's no previous page, this value will be `false`. Example: `{ cursor: 10, link: '/search?page=10' }`.
`next`	`{ cursor: number; link: string}` / `false`	Object containing the cursor position and link for the next page of the search result. If there's no next page, this value will be `false`. Example: `{ cursor: 20, link: '/search?page=20' }`.