useScrollTo

Hook for scrolling to a specific element

sensors

test coverage

Last changed: last month

Installation

Library

CLI

Manual

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

Usage

const trigger = useScrollTo(ref, options);
// or
const { ref, trigger } = useScrollTo(options);

Demo

source

Api

Parameters

Name	Type	Default	Note
target	HookTarget	-	The target element for scrolling to
options?	UseScrollToOptions	-	The scroll options

Returns

UseScrollToReturn

Parameters

Name	Type	Default	Note
options?	UseScrollToOptions	-	The scroll options

Returns

UseScrollToReturn & { ref: StateRef<Target> }

Type declaration

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

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

export interface UseScrollToOptions {
  /** The scrolling behavior */
  behavior?: ScrollBehavior;
  /** Whether to enable the scroll to */
  enabled?: boolean;
  /** The horizontal position to scroll to */
  x: number;
  /** The vertical position to scroll to */
  y: number;
}

export interface UseScrollToReturn {
  /** The state of scrolling */
  trigger: (params?: { x: number; y: number; behavior?: ScrollBehavior }) => void;
}

export interface UseScrollTo {
  <Target extends Element>(
    options?: UseScrollToOptions,
    target?: never
  ): UseScrollToReturn & { ref: StateRef<Target> };

  (target: HookTarget, options?: UseScrollToOptions): UseScrollToReturn;
}

Source

Source • Demo

Contributors

D

debabin

Z

zeroqs