useLockScroll

Hook that locks scroll on an element or document body

elements

medium

test coverage

Last changed: 11 days ago

Installation

Library

CLI

Manual

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

Usage

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

Demo

source

Api

Parameters

Name	Type	Default	Note
target?	HookTarget	document.body	The target element to lock scroll on
options?	UseLockScrollOptions	-	The options for scroll locking

Returns

void

Parameters

Name	Type	Default	Note
options?	UseLockScrollOptions	-	The options for scroll locking

Returns

StateRef<Target>

Type declaration

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