@crtl/react-infinite-list

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

Name	Type	Description
items	T[]	The list of items to display
pending	boolean	Should indicate if an request for items is pending
hasMore	boolean	Indicates if more items are available
buildItem	(item: T, index: number) => ReactNode	Renderer for each, key must be included
loadMore	() => any	Callback which is called to load more items
empty	undefined | () => ReactNode	Optional renderer for component to display when list is empty and no items are available
loader	undefined | () => ReactNode	Optional callback to render component to display while pending
end	undefined | () => ReactNode	Optional callback to render component to display when end of list is reached (hasMore = false && items.length > 0)
trigger	undefined | () => ReactNode	Optional callback, when passed trigger is rendered at end of each page and loading of items will not be trigger by intersection anymore.
threshold	string | undefined	Optional threshold CSS value string should be negative
scrollRoot	RefObject | undefined	Optional ref for element to intersect with. By default intersects with parent element.