Pager (Product Listing Engine)
Pager (Product Listing Engine)
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, andfalse
otherwise. -
hasPreviousPage:
boolean
Returns
true
when a previous page is available, andfalse
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
Related Types
Unsubscribe
Call signatures
-
(): void