How to load more search results when scrolling down the page in React.js?
This is called infinite scroll. If you don't wanna build this from the scratch, you can use external libs:
https://www.npmjs.com/package/react-infinite-scroller
https://www.npmjs.com/package/react-infinite-scroll-component
If you wanna build it yourself, you can follow these tutorials:
https://alligator.io/react/react-infinite-scroll/
https://upmostly.com/tutorials/build-an-infinite-scroll-component-in-react-using-react-hooks
Without plugins:
componentWillMount(){
window.addEventListener('scroll', this.loadMore);
}
componentWillUnmount(){
window.removeEventListener('scroll', this.loadMore);
}
loadMore(){
if (window.innerHeight + document.documentElement.scrollTop === document.scrollingElement.scrollHeight) {
// Do load more content here!
}
}