ResultsPerPage (Product Listing Engine)

This is for:

Developer

Example Implementation

results-per-page.fn.tsx

import {ResultsPerPage as HeadlessResultsPerPage} from '@coveo/headless';
import {useEffect, useState, FunctionComponent} from 'react';
 
interface ResultsPerPageProps {
  controller: HeadlessResultsPerPage;
  options: number[];
}
 
export const ResultsPerPage: FunctionComponent<ResultsPerPageProps> = (
  props
) => {
  const {controller, options} = props;
  const [, setState] = useState(controller.state);
 
  useEffect(() => controller.subscribe(() => setState(controller.state)), []);
 
  return (
    <ul>
      {options.map((numberOfResults) => (
        <li key={numberOfResults}>
          <button
            disabled={controller.isSetTo(numberOfResults)}
            onClick={() => controller.set(numberOfResults)}
          >
            {numberOfResults}
          </button>
        </li>
      ))}
    </ul>
  );
};
 
// usage
 
/**
 * ```tsx
 * const options = [10, 25, 50, 100];
 * const controller = buildResultsPerPage(engine, {
 *   initialState: {numberOfResults: options[0]},
 * });
 *
 * <ResultsPerPage controller={controller} options={options} />;
 * ```
 */

The ResultsPerPage controller allows the end user to choose how many results to display per page.

Methods

isSetTo

Checks whether the number of results per page is equal to the specified number.

Parameters

  • num: number

    The number of results.

Returns boolean: true if the number of results is equal to the passed value, and false otherwise.

set

Updates the number of results to request per page.

Parameters

  • num: number

    The number of results.

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 ResultsPerPage controller.

Properties

  • numberOfResults: number

    The number of results per page.

Initialize

buildResultsPerPage

Creates a ResultsPerPage controller instance for the product listing.

Parameters

  • engine: ProductListingEngine

    The headless engine.

  • props: ResultsPerPageProps

    The configurable ResultsPerPage properties.

Returns ResultsPerPage

ResultsPerPageProps

The configurable ResultsPerPage properties.

Properties

ResultsPerPageInitialState

The initial state that should be applied to this ResultsPerPage controller.

Properties

  • numberOfResults?: number

    The initial number of results to register in state.

Unsubscribe

Call signatures

  • (): void