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

import { InfiniteScroll } from "@nosto/search-js/preact"

<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 } = useLoadMore(pageSize)

    return (
        <button
             onClick={loadMore}
         >
             More results
        </button>
   )
}

<InfiniteScroll loadMoreComponent={LoadMoreButton} pageSize={defaultConfig.pageSize}>
  {products?.hits?.map(hit => <Product hit={hit} />)}
</InfiniteScroll>

Settings

Member Visibility
MMNEPVFCICPMFPCPTTAAATR