React-SearchKit

ResultsPerPage

ResultsPerPage renders a list of the possible number of results per page.

The component is not displayed while executing the search query or if there are no results.

Usage

<ResultsPerPage
  values={[{text: "Ten", value: 10}, {text: "Twenty", value: 20}]}
/>

Props

  • values Array

    A list of possible values, where each value has the format { text: "Fifty", value: 50 }.

  • label function optional

    An optional function to wrap the component with a prefix and suffix string.
    E.g. label={(cmp) => <> Show {cmp} results per page</>}

  • overridableId String optional

    An optional string to define a specific overridable id.

Usage when overriding

const MyResultsPerPage = ({ currentSize, options, onValueChange, ariaLabel, selectOnNavigation }) => {
  ...
}

const overriddenComponents = {
  "ResultsPerPage.element": MyResultsPerPage
};

Parameters

  • currentSize String

    The current value of the size query state.

  • options Array

    The options passed as prop to the component.

  • onValueChange Gunction

    The function to call when the user changes the number of results per page to change the query state. onValueChange(newValue)

  • ariaLabel String

    The ARIA (Accessibility) label to add to the component.

  • selectOnNavigation Boolean

    When using a dropdown, set if the onValueChange should be called when the new dropdown item is selected with arrow keys, or only on click or on enter.

  • showWhenOnlyOnePage Boolean

    Allows to configure whether or not the component will render when there is only one page of results available. Default value: true.

← ResultsMultiLayoutSearchBar →