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


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

...

<ResultsPerPage />

Example using custom options


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

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

Properties

NameDescription
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

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:

NameDescription
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.

On this page