useScrollTo

Hook for scrolling to a specific element

sensors

low

test coverage

Last changed: 7 days ago

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	window	The target element for scrolling to
options.immediately?	boolean	true	Whether to scroll immediately
options.x?	number	-	The horizontal position to scroll to
options.y?	number	-	The vertical position to scroll to
options.behavior?	ScrollBehavior	auto	The scrolling behavior

Returns

UseScrollToReturn

Parameters

Name	Type	Default	Note
options.immediately?	boolean	true	Whether to scroll immediately
options.x?	number	-	The horizontal position to scroll to
options.y?	number	-	The vertical position to scroll to
options.behavior?	ScrollBehavior	auto	The scrolling behavior

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 immediately the scroll to */
  immediately?: 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