Paginationcomponent
The Storefront API uses cursors to paginate through lists of data and the <Pagination />
component makes it easy to paginate data from the Storefront API. It is important for pagination state to be maintained in the URL, so that the user can navigate to a product and return back to the same scrolled position in a list. It is also important that the list state is shareable via URL. The <Pagination>
component provides a render prop with properties to load more elements into your list.
Anchor to propsProps
A render prop that includes pagination data and helpers.
The response from storefront.query
for a paginated request. Make sure the query is passed pagination variables and that the query has with
,
,
, and
defined.
A namespace for the pagination component to avoid URL param conflicts when using multiple Pagination
components on a single page.
Example code
Anchor to examplesExamples
Other examples using the Pagination
component.
Anchor to example-multiple-pagination-components-on-a-single-pageMultiple `Pagination` components on a single page
Anchor to example-exampleExample
Use the namespace
prop to differentiate between multiple Pagination
components on a single page