useInfiniteScroll

Category

Sensors

Export Size

3.42 kB

Last Changed

5 days ago

Infinite scrolling of the element

Demo

Usage

import { useInfiniteScroll } from '@reause/core'
import { useRef, useState } from 'react'

const el = useRef<HTMLDivElement>(null)
const [data, setData] = useState([1, 2, 3, 4, 5, 6])

const { reset } = useInfiniteScroll(el, () => {
  // load more
  setData(d => [...d, ...moreData])
}, {
  distance: 10,
  canLoadMore: () => {
    // indicate when there is no more content to load so onLoadMore stops triggering
    // if (noMoreContent) return false
    return true // for demo purposes
  },
})

function resetList() {
  setData([])
  reset()
}

<>
  <div ref={el}>
    {data.map(item => <div key={item}>{item}</div>)}
  </div>
  <button onClick={resetList}>Reset</button>
</>

Direction

Different scroll directions require different CSS style settings:

Direction	Required CSS
bottom (default)	No special settings required
top	display: flex; flex-direction: column-reverse;
left	display: flex; flex-direction: row-reverse;
right	display: flex;

WARNING

Make sure to indicate when there is no more content to load with canLoadMore, otherwise onLoadMore will trigger as long as there is space for more content.

Type Declarations

Toggle

export interface UseInfiniteScrollOptions<T extends InfiniteScrollElement = InfiniteScrollElement> extends UseScrollOptions {
    distance?: number;
    direction?: 'top' | 'bottom' | 'left' | 'right';
    interval?: number;
    canLoadMore?: (el: T) => boolean;
}

export interface UseInfiniteScrollReturn {
    isLoading: boolean;
    reset: () => void;
}

type InfiniteScrollElement = HTMLElement | SVGElement | Window | Document | null | undefined

export interface UseScrollOptions extends ConfigurableWindow {
    throttle?: number;
    idle?: number;
    offset?: {
        left?: number;
        right?: number;
        top?: number;
        bottom?: number;
    };
    observe?: boolean | {
        mutation?: boolean;
    };
    onScroll?: (e: Event) => void;
    onStop?: (e: Event) => void;
    eventListenerOptions?: boolean | AddEventListenerOptions;
    behavior?: ScrollBehavior;
    onError?: (error: unknown) => void;
}

export interface UseScrollReturn {
    x: number;
    y: number;
    isScrolling: boolean;
    arrivedState: {
        left: boolean;
        right: boolean;
        top: boolean;
        bottom: boolean;
    };
    directions: {
        left: boolean;
        right: boolean;
        top: boolean;
        bottom: boolean;
    };
    measure: () => void;
    setX: (x: number) => void;
    setY: (y: number) => void;
}

type Awaitable<T> = T | Promise<T>

export function useInfiniteScroll<T extends InfiniteScrollElement>(element: RefObject<T | null>, onLoadMore: (state: UseScrollReturn) => Awaitable<void>, options?: UseInfiniteScrollOptions<T>): UseInfiniteScrollReturn

export function useScroll(element: RefObject<UseScrollElement | null>, options?: UseScrollOptions): UseScrollReturn

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

a786c - fix(core): resolve useInfiniteScroll audit findings (#583)

f8bb8 - feat(core): add useInfiniteScroll (#144)