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>
    </>
  );
}

More Hooks:

Sort: