useLockBodyScroll

Locks or unlocks the body scroll — ideal for modals, sidebars, or full-screen overlays.


✅ Features

  • One-liner scroll locking
  • Automatically cleans up on unmount
  • Zero-config

📦 Usage

1import { useLockBodyScroll } from './useLockBodyScroll';
2
3const Modal = () => {
4  useLockBodyScroll(true);
5
6  return <div className="modal">Modal Content</div>;
7};

📋 Source Code

This is the full implementation of useLockBodyScroll

1import { useLayoutEffect } from 'react';
2
3export function useLockBodyScroll(lock: boolean = true) {
4  useLayoutEffect(() => {
5    if (!lock) return;
6    const original = document.body.style.overflow;
7    document.body.style.overflow = 'hidden';
8    return () => {
9      document.body.style.overflow = original;
10    };
11  }, [lock]);
12}
13