react-infinite-scroll-component

import React, { useState } from 'react'; import InfiniteScroll from 'react-infinite-scroll-component'; interface Item { id: number; content: string; } const style = { padding: 15, borderBottom: '1px solid #eee', minHeight: 50, }; const App: React.FC = () => { const [items, setItems] = useState<Item[]>( Array.from({ length: 20 }, (_, i) => ({ id: i, content: `Initial Item #${i}` })) ); const [hasMore, setHasMore] = useState(true); const fetchMoreData = () => { if (items.length >= 100) { setHasMore(false); return; } // Simulate an API call setTimeout(() => { setItems((prevItems) => [ ...prevItems, ...Array.from({ length: 20 }, (_, i) => ({ id: prevItems.length + i, content: `Fetched Item #${prevItems.length + i}`, })), ]); }, 1500); }; const refreshData = () => { // Simulate re-fetching initial data for pull-to-refresh return new Promise<void>((resolve) => { setTimeout(() => { setItems(Array.from({ length: 20 }, (_, i) => ({ id: i, content: `Refreshed Item #${i}` }))); setHasMore(true); resolve(); }, 1000); }); }; return ( <div> <h1 style={{ textAlign: 'center' }}>Infinite Scroll Demo</h1> <div id="scrollableDiv" style={{ height: 400, overflow: 'auto', margin: '20px auto', border: '1px solid #ccc', width: '80%', }} > <InfiniteScroll dataLength={items.length} next={fetchMoreData} hasMore={hasMore} loader={<h4>Loading...</h4>} endMessage={ <p style={{ textAlign: 'center', padding: '10px' }}> <b>Yay! You have seen it all</b> </p> } refreshFunction={refreshData} pullDownToRefresh pullDownToRefreshThreshold={50} pullDownToRefreshContent={ <h3 style={{ textAlign: 'center', margin: 0, padding: '10px' }}>&#8595; Pull down to refresh</h3> } releaseToRefreshContent={ <h3 style={{ textAlign: 'center', margin: 0, padding: '10px' }}>&#8593; Release to refresh</h3> } scrollableTarget="scrollableDiv" > {items.map((item) => ( <div key={item.id} style={style}> {item.content} </div> ))} </InfiniteScroll> </div> </div> ); }; export default App;