useInfiniteScroll

Stock Screening Platform - Frontend API v0.1.0

---

Stock Screening Platform - Frontend API / hooks/useInfiniteScroll / useInfiniteScroll

Function: useInfiniteScroll()

useInfiniteScroll(fetchMore, options): UseInfiniteScrollReturn

Defined in: src/hooks/useInfiniteScroll.ts:91

Custom hook for infinite scroll functionality

Automatically loads more items when user scrolls near bottom of container. Prevents duplicate loads and provides manual trigger option.

Parameters

fetchMore

() => void | Promise<void>

Callback function to fetch more items

options

UseInfiniteScrollOptions = {}

Configuration options

Returns

UseInfiniteScrollReturn

Scroll state and utilities

Example

function MyList() {
  const [page, setPage] = useState(1)
  const [hasMore, setHasMore] = useState(true)
  const [isLoading, setIsLoading] = useState(false)

  const fetchMoreItems = async () => {
    setIsLoading(true)
    const newItems = await api.fetchItems(page + 1)
    setPage(page + 1)
    setHasMore(newItems.length > 0)
    setIsLoading(false)
  }

  const { scrollContainerRef, isFetching, loadMore } = useInfiniteScroll(
    fetchMoreItems,
    { hasMore, isLoading }
  )

  return (
    <div ref={scrollContainerRef}>
      {items.map(item => <Item key={item.id} {...item} />)}
      {isFetching && <Spinner />}
      <button onClick={loadMore}>Load More</button>
    </div>
  )
}