useLockBodyScroll
Temporarily disable scrolling on the document body with useLockBodyScroll.
Install:
npm i @uidotdev/usehooks
Description:
The useLockBodyScroll hook temporarily disables scrolling on the document body. This can be beneficial in scenarios where you want to restrict scrolling while displaying a modal, a dropdown menu, or any other component that requires the user’s focus. Once the component using this hook is unmounted or no longer needed, the hook returns a cleanup function that restores the original overflow style, ensuring that the scroll behavior is reverted to its previous state.
Demo:
Example:
import * as React from "react";
import { useLockBodyScroll } from "@uidotdev/usehooks";
import { closeIcon } from "./icons";
import DemoContent from "./DemoContent";
function Modal({ handleClose }) {
useLockBodyScroll();
return (
<div>
<dialog>
<header>
<button onClick={handleClose}>{closeIcon}</button>
<h2>Modal</h2>
</header>
<section>
<DemoContent />
</section>
</dialog>
</div>
);
}
export default function App() {
const [isOpen, setIsOpen] = React.useState(false);
return (
<>
{isOpen && <Modal handleClose={() => setIsOpen(false)} />}
<main>
<header>
<h1>useLockBodyScroll</h1>
</header>
{["red", "blue", "green", "pink", "purple", "yellow"].map((color) => {
return (
<section
style={{
backgroundColor: `var(--${color})`,
width: "100%",
height: "50vh",
}}
/>
);
})}
<button className="primary" onClick={() => setIsOpen(true)}>
openModal
</button>
</main>
</>
);
}