Interface Props

src/index.tsx:21–128

type Fn = () => any;

export interface Props extends AriaAttributes {
  /**
   * Total number of items currently rendered. Unlocks the next load when it
   * changes. Always pass the length of your full accumulated list, not just
   * the most recently fetched page.
   */
  dataLength: number;
  /**
   * Called when the user scrolls near the end of the list. Must append new
   * items to your list state (not replace them). The component calls this at
   * most once per data load, guarded by an IntersectionObserver sentinel.
   */
  next: Fn;
  /**
   * Whether more data exists to load. When false, the observer stops and
   * `endMessage` is shown instead of `loader`.
   */
  hasMore: boolean;
  /**
   * The full accumulated list of items to render. Pass every item loaded so
   * far — the component is not paginated internally.
   */
  children: ReactNode;
  /**
   * Element shown while the next page is being fetched (while `hasMore` is
   * true and `next` has been triggered).
   */
  loader: ReactNode;
  /**
   * How close to the end of the list before `next` fires.
   * - Number 0–1: fraction of container height, e.g. `0.8` triggers at 80%
   *   scrolled (default).
   * - Pixel string: absolute offset, e.g. `"200px"` triggers 200 px before
   *   the end.
   * @default 0.8
   */
  scrollThreshold?: number | string;
  /** Shown below the list once `hasMore` is false. */
  endMessage?: ReactNode;
  /** Inline styles applied to the inner scroll container. */
  style?: CSSProperties;
  /**
   * Fixed height for the scroll container. When provided, a scrollable box
   * of this height is rendered. Omit to scroll the window (document body).
   */
  height?: number | string;
  /**
   * A scrollable parent element that already provides overflow scrollbars.
   * Accepts a DOM element reference or the element's string `id`. Pass this
   * instead of `height` when the scroll container is owned by the parent.
   *
   * @example
   * // string id
   * scrollableTarget="scrollableDiv"
   *
   * @example
   * // ref value
   * const ref = useRef(null);