Skip to content

useLockScroll ​

Hook that locks scroll on an element or document body

elements
test coverage
Last changed: 2 days ago

Installation ​

Library
CLI
Manual
typescript
import { useLockScroll } from '@siberiacancode/reactuse';

Usage ​

typescript
const { lock, unlock, value, toggle } = useLockScroll(ref);
// or
const { ref, lock, unlock, value, toggle } = useLockScroll();

Demo ​

Api ​

Parameters

NameTypeDefaultNote
target?HookTargetdocument.bodyThe target element to lock scroll on
options?UseLockScrollOptions-The options for scroll locking

Returns

void

Parameters

NameTypeDefaultNote
options?UseLockScrollOptions-The options for scroll locking

Returns

StateRef<Target>

Type declaration ​

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

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

export interface UseLockScrollOptions {
  /** Enable or disable scroll locking. Default: true */
  enabled?: boolean;
}

export interface UseLockScrollReturn<Target extends Element> {
  /** The ref to attach to the element */
  ref: StateRef<Target>;
  /** The value of the lock state */
  value: boolean;
  /** Lock the scroll */
  lock: () => void;
  /** Toggle the scroll lock */
  toggle: () => void;
  /** Unlock the scroll */
  unlock: () => void;
}

export interface UseLockScroll {
  (target: HookTarget, options?: UseLockScrollOptions): UseLockScrollReturn<Element>;

  <Target extends Element>(
    options?: UseLockScrollOptions,
    target?: never
  ): UseLockScrollReturn<Target> & { ref: StateRef<Target> };
}

Source ​

Source • Demo

Contributors ​

D
debabin
debabin

Released under the MIT License.