Really simple infinite scroll component for React.
importReact,{useState,useCallback,useEffect}from"react";import{ReallySimpleInfiniteScroll}from"react-really-simple-infinite-scroll";// You can use any loading component you want. This is just an example using a spinner from "react-spinners-kit".import{CircleSpinner}from"react-spinners-kit";/** *@type {number} */letitemId=0;/** *@type {Function} */constgenerateMoreItems=numberOfItemsToGenerate=>{constitems=[];for(leti=0;i<numberOfItemsToGenerate;i++){itemId++;items.push({id:itemId,label:`Item${itemId}`,});}returnitems;};exportdefaultfunctionApp(){const[displayInverse,setDisplayInverse]=useState(false);const[hasMore,setHasMore]=useState(true);const[isInfiniteLoading,setIsInfiniteLoading]=useState(true);const[items,setItems]=useState([]);constonInfiniteLoadCallback=useCallback(()=>{setIsInfiniteLoading(true);setTimeout(()=>{constmoreItems=generateMoreItems(25);setItems(items=>items.concat(moreItems));setIsInfiniteLoading(false);},1000);},[]);useEffect(()=>{onInfiniteLoadCallback();},[onInfiniteLoadCallback]);useEffect(()=>{if(items.length>=200){setHasMore(false);}},[items.length]);return(<divclassName="app"><ReallySimpleInfiniteScrollkey={displayInverse}className={`infinite-scroll${items.length&&displayInverse ?"display-inverse" :"display-not-inverse"}`}hasMore={hasMore}length={items.length}loadingComponent={<divclassName="loading-component"><divclassName="spinner"><CircleSpinnersize={20}/></div>{" "}<spanclassName="loading-label">Loading...</span></div>}isInfiniteLoading={isInfiniteLoading}onInfiniteLoad={onInfiniteLoadCallback}displayInverse={displayInverse}>{(displayInverse ?items.slice().reverse() :items).map(item=>(<divkey={item.id}className="item">{item.label}</div>))}</ReallySimpleInfiniteScroll><div><buttononClick={()=>setDisplayInverse(displayInverse=>!displayInverse)}> Toggle displayInverse</button></div></div>);}
