reactuals/dist/hooks/useScrollLock.js

A useful package providing a collection of 50+ React hooks and utilities to simplify React development.

import { useCallback, useEffect, useRef, useState } from "react";
export function useScrollLock(initialLocked = false) {
    const [locked, setLocked] = useState(initialLocked);
    const originalOverflow = useRef("");
    useEffect(() => {
        if (locked) {
            originalOverflow.current = window.getComputedStyle(document.body).overflow;
            document.body.style.overflow = "hidden";
        }
        else {
            document.body.style.overflow = originalOverflow.current || "";
        }
        return () => {
            document.body.style.overflow = originalOverflow.current || "";
        };
    }, [locked]);
    const lock = useCallback(() => setLocked(true), []);
    const unlock = useCallback(() => setLocked(false), []);
    const toggle = useCallback(() => setLocked((prev) => !prev), []);
    return { locked, lock, unlock, toggle };
}