ResultsPerPage (Product Listing Engine)
ResultsPerPage (Product Listing Engine)
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
-
initialState?:
ResultsPerPageInitialState
The initial state that should be applied to this
ResultsPerPage
controller.
ResultsPerPageInitialState
The initial state that should be applied to this ResultsPerPage
controller.
Properties
-
numberOfResults?:
number
The initial number of results to register in state.
Related Types
Unsubscribe
Call signatures
-
(): void