Const<InfiniteScroll pageSize={defaultConfig.pageSize}>
{products?.hits?.map(hit => <Product hit={hit} />)}
</InfiniteScroll>
<InfiniteScroll pageSize={defaultConfig.pageSize}>
<Products />
</InfiniteScroll>
// With custom load more button
function LoadMoreButton({ pageSize }) {
const { loadMore, href } = useLoadMore(pageSize)
return (
<a
class="ns-load-more-button ns-act-btn ns-act-btn-light"
onClick={loadMore}
href={href}
>
More results
</a>
)
}
<InfiniteScroll loadMoreComponent={LoadMoreButton} pageSize={defaultConfig.pageSize}>
{products?.hits?.map(hit => <Product hit={hit} />)}
</InfiniteScroll>
Infinite scroll component that loads more results when user scrolls to the end of the page. If the browser does not support IntersectionObserver, a load more button is shown instead.