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

Param: props

Example

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

Settings

Member Visibility