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