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