ShowMore

The ShowMore component controls pagination for views that display a SearchResultsModelBase (specified via the model prop).
This component uses either the total or numberOfPages fields on SearchResultsModelBase to determine whether or not to trigger show more. The default variant is a button with text/contents can be changed by specifying a child (string or components). Or this component can be configured to use infinite scrolling for triggering another page.

Import
import ShowMore from 'react-storefront/ShowMore'

Props

NameTypeDefaultDescription
loadingfunc

A renderer for the loading icon. Uses CircularPropgress by default

modelobject

An instance of SearchResultModelBase

classesobject

CSS classes

offsetnumber100

When infiniteScroll is set to true, this prop describes how near to the bottom of the page in pixels the user must scroll before the next page is fetched.

infiniteScrollbool

Set to true to automatically fetch the next page when the user scrolls to the bottom of the page instead of displaying a "Show More" button.

Loading() => <CircularProgress/>

CSS API

You can override all the class names injected by Moov-PWA thanks to the classes property. This property accepts the following keys:

  • root
  • loading