› › ›

ResultsPerPage

Shows a dropdown for selecting the number of results to show per page.

Uses [20, 40, 60] as default options. You can use options prop to pass custom options.

Note: When passing custom options make sure one of the option values match the current resultsPerPageProp value, which is 20 by default. To override resultsPerPage default value, use the initial state property.

Example

edit

import { ResultsPerPage } from "@elastic/react-search-ui";

...

<ResultsPerPage />

Example using custom options

edit

import { SearchProvider, ResultsPerPage } from "@elastic/react-search-ui";

<SearchProvider
    config={
        ...
        initialState: {
            resultsPerPage: 5
        }
    }
>
    <ResultsPerPage options={[5, 10, 15]} />
</SearchProvider>

Properties

edit

Name	Description
className
options	Type: `number[]`. Dropdown options to select the number of results to show per page.
view	Used to override the default view for this Component. See View customization below.
*	Any other property passed will be passed through and available to use in a Custom View.

View customization

edit

A complete guide to view customization can be found in the Customization: Component views and HTML section.

The following properties are available in the view:

Name	Description
className	Passed through from main component.
onChange	function(value: number) - Call this function with the select value from `options` after a user has made a selection.
options	Passed through from main component.
value	The currently selected option.

See ResultsPerPage.tsx for an example.

« Result Facet »