Pager (Product Listing Engine)

This is for:

Developer

Example Implementation

pager.fn.tsx

import {Pager as HeadlessPager} from '@coveo/headless';
import {useEffect, useState, FunctionComponent} from 'react';
 
interface PagerProps {
  controller: HeadlessPager;
}
 
export const Pager: FunctionComponent<PagerProps> = (props) => {
  const {controller} = props;
  const [state, setState] = useState(controller.state);
 
  useEffect(() => controller.subscribe(() => setState(controller.state)), []);
 
  return (
    <nav>
      <button
        disabled={!state.hasPreviousPage}
        onClick={() => controller.previousPage()}
      >
        {'<'}
      </button>
      {state.currentPages.map((page) => (
        <button
          key={page}
          disabled={controller.isCurrentPage(page)}
          onClick={() => controller.selectPage(page)}
        >
          {page}
        </button>
      ))}
      <button
        disabled={!state.hasNextPage}
        onClick={() => controller.nextPage()}
      >
        {'>'}
      </button>
    </nav>
  );
};
 
// usage
 
/**
 * ```tsx
 * const options: PagerOptions = {numberOfPages: 6};
 * const controller = buildPager(engine, {options});
 *
 * <Pager controller={controller} />;
 * ```
 */

The Pager controller allows to navigate through the different result pages.

Methods

isCurrentPage

Returns true when the current page is equal to the passed page, and false otherwise.

Parameters

  • page: number

    The page number to check.

Returns boolean: Whether the passed page is selected.

nextPage

Updates the results to those on the next page.

previousPage

Updates the results to those on the previous page.

selectPage

Updates the results to those on the passed page.

Parameters

  • page: number

    The page number.

subscribe

Adds a callback that’s invoked on state change.

Parameters

  • listener: () => void

    A callback that’s invoked on state change.

Returns Unsubscribe: A function to remove the listener.

Attributes

state

The state of the Pager controller.

Properties

  • currentPage: number

    The active page number.

  • currentPages: number[]

    The page range to display.

  • hasNextPage: boolean

    Returns true when a next page is available, and false otherwise.

  • hasPreviousPage: boolean

    Returns true when a previous page is available, and false otherwise.

  • maxPage: number

    The maximum available page.

Initialize

buildPager

Creates a Pager controller instance for the product listing.

Parameters

  • engine: ProductListingEngine

    The headless engine.

  • props: PagerProps

    The configurable Pager properties.

Returns Pager

PagerProps

The configurable Pager properties.

Properties

  • initialState?: PagerInitialState

    The initial state that should be applied to the Pager controller.

  • options?: PagerOptions

    The options for the Pager controller.

PagerInitialState

The initial state that should be applied to the Pager controller.

Properties

  • page?: number

    The initial page number.

PagerOptions

The options for the Pager controller.

Properties

  • numberOfPages?: number

    The number of pages to display in the pager.

    Default: 5

Unsubscribe

Call signatures

  • (): void