use-infinite-list-usage.md

Home / useInfiniteList

useInfiniteList

This hook manages the state of an infinite list. The managed state are in the order:

• List of items (Array)
• Current page (number)
• Max items count (number)
• Trigger load more items (Function)
• Load more items success callback (Function)
• Load more items error callback (Function)

useInfiniteList can be paired with the InfiniteList to provide a load-more mechanism for a particular list.

Usage

import { useInfiniteList } from "react-simple-widgets/dist/use-infinite-list";
import { InfiniteList } from "react-simple-widgets/dist/infinite-list";

export function CountdownUsage() {
  const [
    items,
    page,
    total,
    triggered,
    loadMore,
    onLoadMoreSuccess,
    onLoadMoreFailed
  ] = useInfiniteList();

  return (
    <InfiniteList error busy total count onLoadMore>
      /* Render infinite list here */
    </InfiniteList>
  );
}

• items: Array<any>

  The infinite list of items

• page: number

  The current page of items

• total: number

  The total number of items to be expected from the data source

• triggered: boolean

  When a load-more is triggered, this state variable changes. Use this in a useEffect to trigger a fetch

• loadMore: (resetPage?: boolean) => void

  Call this function to trigger a load more. If you want to reset the page number of the data fetch, set resetPage=true

• onLoadMoreSuccess: (newItems: Array<any>, totalItems: number) => void

  Call this function with the newItems list returned from the data source as well as the totalItems count

• onLoadMoreFailed: () => void

  Call this function if the app failed to fetch the new items from the data source