Infinite Scroll

An infinite scroll container that loads more content using the IntersectionObserver API.

@spectrumui/infinite-scroll-demo

Installation

Login to view commandCreate a free account to access the install command

Properties

Prop	Type	Default	Description
*`isLoading`	`boolean`	-	If `isLoading` is true, infinite scroll will stop calling `next()` function to avoid duplicate calls.
*`hasMore`	`boolean`	-	If `hasMore` is false, infinite scroll will stop calling `next()` function.
*`next`	`() => unknown`	-	`next` Function to call when the user scrolls to the bottom of the `children` element.
`threshold`	`number`	`1`	The threshold is the number of pixels from the bottom of the element where the next function will be called. The range of threshold is `0 ~ 1`, and the default value is `1`. Since InfiniteScroll is implemented with IntersectionObserver, you can find more on MDN.
`root`	`number`	`null`	This property will be used as the viewport for checking visibility of the last or the first item. Must be the ancestor of the item. Defaults to the browser viewport. Since InfiniteScroll is implemented with IntersectionObserver, you can find more on MDN.
`rootMargin`	`string`	`0px`	The rootMargin is the margin around the root. You can use any valid CSS unit like px, em, rem, %, etc. Since InfiniteScroll is implemented with IntersectionObserver, you can find more on MDN.
`reverse`	`boolean`	`false`	Set this property to true means that InfiniteScroll will call `next` when the first item shows up in the viewport. This property is usually used to implement the chatbox behavior. If your `next` function prepend the new data to the previous data, the first item will always show up on the top. This will cause InfiniteScroll continuously call next. Make sure write some code to prevent this circumstance.
`children`	`ReactNode`	`undefined`	This property is that user will see according to the`threshold` position and call `next` on the viewpoint.