useInfiniteScroll

Infinite scrolling of the element

Usage

Live Editor

function Demo() {
  const ref = useRef<HTMLDivElement>(null);
  const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);

  useInfiniteScroll(
    ref,
    () => {
      const length = data.length + 1;
      const newData = data.slice();
      if (newData.length === 400) {
        return;
      }
      newData.push(...Array.from({ length: 5 }, (_, i) => length + i));
      setData(newData);
    },
    { distance: 10 },
  );

  return (
    <div>
      <div ref={ref} style={{ width: 300, height: 300, overflow: "scroll" }}>
        {data.map(item => (
          <div key={item} style={{ padding: 12, border: "1px solid" }}>
            item-{item}
          </div>
        ))}
      </div>
    </div>
  );
};

Result

item-1

item-2

item-3

item-4

item-5

item-6

item-7

item-8

item-9

item-10

API

useInfiniteScroll

Returns

void

Arguments

Argument	Description	Type	DefaultValue
target	dom element	BasicTarget<Element> (Required)	-
onLoadMore	load more function	UseInfiniteScrollLoadMore (Required)	-
options	optional params	UseInfiniteScrollOptions | undefined	-

UseInfiniteScrollLoadMore

Returns

void | Promise<void>

Arguments

Argument	Description	Type	DefaultValue
state	the return state of useScroll	readonly [number, number, boolean, UseInfiniteScrollArrivedState, UseInfiniteScrollDirection] (Required)	-

UseInfiniteScrollOptions

Property	Description	Type	DefaultValue
distance	The minimum distance between the bottom of the element and the bottom of the viewport	number	0
direction	The direction in which to listen the scroll.	'top' | 'bottom' | 'left' | 'right'	'bottom'
preserveScrollPosition	Whether to preserve the current scroll position when loading more items.	boolean	-
throttle	Throttle time for scroll event, it's disabled by default.	number	0
idle	The check time when scrolling ends.This configuration will be setting to (throttle + idle) when the throttle is configured.	number	-
offset	Offset arrived states by x pixels	UseScrollOffset	-
onScroll	Trigger it when scrolling.	(e: Event) => void	-
onStop	Trigger it when scrolling ends.	(e: Event) => void	-
eventListenerOptions	Listener options for scroll event.	boolean | AddEventListenerOptions	{capture: false, passive: true}

UseInfiniteScrollArrivedState

Property	Description	Type	DefaultValue
left	arrived left	boolean (Required)	-
right	arrived right	boolean (Required)	-
top	arrived top	boolean (Required)	-
bottom	arrived bottom	boolean (Required)	-

UseInfiniteScrollDirection

Property	Description	Type	DefaultValue
left	scroll left	boolean (Required)	-
right	scroll right	boolean (Required)	-
top	scroll top	boolean (Required)	-
bottom	scroll bottom	boolean (Required)	-

BasicTarget

export type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;

TargetValue

type TargetValue<T> = T | undefined | null;

TargetType

type TargetType = HTMLElement | Element | Window | Document | EventTarget;

UseScrollOffset

export interface UseScrollOffset {
  left?: number;
  right?: number;
  top?: number;
  bottom?: number;
}