useInfiniteScroll

Hook that defines the logic for infinite scroll

sensors

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

{ ref: StateRef<Target>, loading: boolean }

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

boolean

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 UseInfiniteScroll {
  (
    target: HookTarget,
    callback: (event: Event) => void,
    options?: UseInfiniteScrollOptions
  ): boolean;

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

Source

Source • Demo

Contributors

D

debabin

“

“Ediand11”

N

Nikita