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