ResultsPerPage

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 will be called on state change.

Parameters

  • listener: () ⇒ void

    A callback to be invoked on state change.

Returns Unsubscribe: An unsubscribe 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.

Parameters

  • engine: Engine<PaginationSection & ConfigurationSection>

    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

Example Implementation

results-per-page.fn.tsx

import {useEffect, useState, FunctionComponent} from 'react';
import {
  buildResultsPerPage,
  ResultsPerPage as HeadlessResultsPerPage,
} from '@coveo/headless';
import {engine} from '../../engine';
 
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
 
const options = [10, 25, 50, 100];
const controller = buildResultsPerPage(engine, {
  initialState: {numberOfResults: options[0]},
});
 
<ResultsPerPage controller={controller} options={options} />;
Recommended Articles