useBodyOverflow

Locks page scroll by toggling overflow-hidden on document.body.

Body scroll is unlocked.

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/use-body-overflow.json

Usage

Pass true while a modal, sheet, drawer, or mobile menu is open. The hook adds overflow-hidden to document.body and removes it when closed or on unmount.

import { useBodyOverflow } from "@/hooks/use-body-overflow";

export function MobileMenu({ open }: { open: boolean }) {
  useBodyOverflow(open);

  return open ? <nav>{/* overlay content */}</nav> : null;
}

Use alongside overlay components so background content cannot scroll while the overlay is visible.