@crtl/react-infinite-list v1.7.0

react-infinite-list

Basic component to render infinite list and handle logic to refresh when reaching end.

Example

import {useInfiniteList, InfiniteList} from "@crtl/react-infinite-list";

const App = (props) => {
    const {
        items, setItems, addItems, removeItems, pending, setPending, hasMore, setHasMore
    } = useInfiniteList();

    const loadItems = () => {
        // set pending to show loader
        setPending(true);
        
        setTimeout(() => {
            addItems([1, 2, 3, 4]);
            
            // set hasMore depending on wheter or not more items are avilable
            setHasMore(false);
            
            // reset pending to false
            setPending(false);
        }, 1000);
    };
    
    return (
        <div style={{maxHeight: "100%", overflow: "auto"}}>
            <InfiniteList<any> 
                className="MyInfiniteList"
                items={items} 
                hasMore={hasMore} 
                pending={pending}
                buildItem={(item: any, index: number) => <p>{index}</p>}
                loadMore={loadItems}
                empty={() => <p>No items found</p>}
                loader={() => <p>Loading...</p>}
                end={() => <p>No more items available</p>}
                trigger={() => <button onClick={loadItems}>Click to load more</button>}
                threshold="-20vh"
            />
        </div>
    );

};

InfiniteList itself renders no wrapping element to allow free customization of behaviour.

By default the IntersectionObserver will listen on its parent element which in the above example is .MyInfiniteList.

To change this behaviour you can pass a React ref with scrollRoot prop.

Options