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
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 ​
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 • DemoContributors ​
D