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. |