react-sentinel-infinite-scroll
React hook based infinite scroll by sentinel
Demo Code
const fetchMockData = { return { }} const InfiniteScrollExample = { const list setList = const topCallback = { return } const bottomCallback = { return } const listRef topSentinelRef bottomSentinelRef = const stopLoading = listlength > 15 && listlength < 20 return <div ref=listRef style= height: '200px' width: '200px' overflow: 'auto' > !stopLoading && <div ref=topSentinelRef>Loading</div> <div className="list"> list </div> <div ref=bottomSentinelRef>Loading</div> </div> } const InfiniteScrollExample2 = { const list setList = const topCallback = { return } const bottomCallback = { return } const stopLoading = listlength > 15 && listlength < 20 return <InfiniteScroll topOffset=40 topCallback=topCallback bottomCallback=bottomCallback topObserverOptions= rootMargin: '40px 0px' > <div ref=listRef style= height: '200px' width: '200px' overflow: 'auto' > !stopLoading && <div ref=topSentinelRef>Loading</div> <div className="list"> list </div> <div ref=bottomSentinelRef>Loading</div> </div> </InfiniteScroll> } const App = { return <div className="App"> <header className="App-header"> <img src=logo className="App-logo" alt="logo" /> <h3>InfiniteScroll</h3> <div style= display: 'flex' > <InfiniteScrollExample /> <InfiniteScrollExample2 /> </div> </header> </div> }