useInfiniteScroll

Hook that defines the logic for infinite scroll

sensors

medium

test coverage

Last changed: last month

Installation

Library

CLI

Manual

import { useInfiniteScroll } from '@siberiacancode/reactuse';

Usage

const { ref, loading } = useInfiniteScroll(() => console.log('infinite scroll'));
// or
const { loading } = useInfiniteScroll(ref, () => console.log('infinite scroll'));

Demo

source

Api

Parameters

Name	Type	Default	Note
callback	(event: Event) => void	-	The callback to execute when a click outside the target is detected
options.distance?	number	10	The distance in pixels to trigger the callback
options.direction?	string	'bottom'	The direction to trigger the callback

Returns

UseInfiniteScrollReturn & { ref: StateRef<Target> }

Parameters

Name	Type	Default	Note
target	HookTarget	-	The target element to detect infinite scroll for
callback	(event: Event) => void	-	The callback to execute when a click outside the target is detected
options.distance?	number	10	The distance in pixels to trigger the callback
options.direction?	string	'bottom'	The direction to trigger the callback

Returns

UseInfiniteScrollReturn

Type declaration

import type { HookTarget } from '@/utils/helpers';

import type { StateRef } from '../useRefState/useRefState';

export interface UseInfiniteScrollOptions {
  /** The direction to trigger the callback */
  direction?: 'bottom' | 'left' | 'right' | 'top';
  /** The distance in pixels to trigger the callback */
  distance?: number;
}

export interface UseInfiniteScrollReturn {
  /** The loading state of the infinite scroll */
  loading: boolean;
  /** The ref to attach to the element */
  ref: StateRef<Element>;
}

export interface UseInfiniteScroll {
  (
    target: HookTarget,
    callback: (event: Event) => void,
    options?: UseInfiniteScrollOptions
  ): UseInfiniteScrollReturn;

  <Target extends Element>(
    callback: (event: Event) => void,
    options?: UseInfiniteScrollOptions,
    target?: never
  ): UseInfiniteScrollReturn & { ref: StateRef<Target> };
}

Source

Source • Demo

Contributors

D

debabin

“

“Ediand11”

N

Nikita