Zentauri UI
Hooks

useBodyScrollLock

Use when overlays, drawers, or modals should prevent background scroll without fighting nested scroll containers.

Import

import { useBodyScrollLock } from "@zentauri-ui/zentauri-components/lib/useBodyScrollLock";

Demo source

Full client component used for this preview (same JSX as below). Adjust paths if you copy outside this app.

"use client";

import { useBodyScrollLock } from "@zentauri-ui/zentauri-components/lib/useBodyScrollLock";
import { Button } from "@zentauri-ui/zentauri-components/ui/buttons";
import { HookDemoPanel } from "@/components/preview/hooks/hook-demo-panel";
import { useState } from "react";

export default function HookDemo() {
  const [locked, setLocked] = useState(false);
  useBodyScrollLock(locked);
  return (
    <HookDemoPanel title="Interactive demo">
      <p className="mb-4 text-sm text-slate-400">
        Toggle scroll lock on the document body. When locked, the page behind this
        panel should not scroll.
      </p>
      <Button type="button" onClick={() => setLocked((v) => !v)}>
        {locked ? "Unlock body scroll" : "Lock body scroll"}
      </Button>
      <div className="mt-6 h-64 overflow-auto rounded-lg border border-white/10 bg-slate-900/50 p-4 text-sm text-slate-400">
        <p className="mb-2 font-medium text-slate-300">Tall inner scroll region</p>
        {Array.from({ length: 24 }, (_, i) => (
          <p key={i}>Line {i + 1} — scroll inside this box is independent of body lock.</p>
        ))}
      </div>
    </HookDemoPanel>
  );
}

Interactive demo

Toggle scroll lock on the document body. When locked, the page behind this panel should not scroll.

Tall inner scroll region

Line 1 — scroll inside this box is independent of body lock.

Line 2 — scroll inside this box is independent of body lock.

Line 3 — scroll inside this box is independent of body lock.

Line 4 — scroll inside this box is independent of body lock.

Line 5 — scroll inside this box is independent of body lock.

Line 6 — scroll inside this box is independent of body lock.

Line 7 — scroll inside this box is independent of body lock.

Line 8 — scroll inside this box is independent of body lock.

Line 9 — scroll inside this box is independent of body lock.

Line 10 — scroll inside this box is independent of body lock.

Line 11 — scroll inside this box is independent of body lock.

Line 12 — scroll inside this box is independent of body lock.

Line 13 — scroll inside this box is independent of body lock.

Line 14 — scroll inside this box is independent of body lock.

Line 15 — scroll inside this box is independent of body lock.

Line 16 — scroll inside this box is independent of body lock.

Line 17 — scroll inside this box is independent of body lock.

Line 18 — scroll inside this box is independent of body lock.

Line 19 — scroll inside this box is independent of body lock.

Line 20 — scroll inside this box is independent of body lock.

Line 21 — scroll inside this box is independent of body lock.

Line 22 — scroll inside this box is independent of body lock.

Line 23 — scroll inside this box is independent of body lock.

Line 24 — scroll inside this box is independent of body lock.

What it does

useBodyScrollLock ships as a small client module you can import from @zentauri-ui/zentauri-components/lib/useBodyScrollLock. Use it when the behavior matches your integration without copying utility code.

API notes

Read the interactive demo on this page for the parameters used in typical flows. Refer to TypeScript types exported next to the hook for exhaustive options.

Common use cases

  • Reuse the same hook in client components across Next.js App Router routes.
  • Keep server components free of browser APIs; colocate interactive demos in client files.
  • Compose hooks with Zentauri UI primitives for overlays, forms, and data views.
  • Align documentation with published @zentauri-ui/zentauri-components/lib/* paths.

Accessibility

Hooks manipulate behavior, not roles. Pair them with appropriate elements, ARIA attributes, and keyboard handlers so assistive technologies receive a coherent experience.

Next.js integration notes

Keep interactive subtrees in client components. When you only need static copy, leave it in the server layout and pass children into a client boundary that calls the hook.

FAQ

Can I import this hook from a server component?

No. These hooks rely on browser APIs or React client lifecycle. Import them from a file marked with the "use client" directive or from a client child component.

Does the preview site bundle the same code as npm?

The component library app depends on the workspace package. Published builds resolve the same export paths under @zentauri-ui/zentauri-components.

Where should I validate accessibility for hook-driven UI?

Hooks do not replace semantics. Test focus order, labels, and keyboard flows in your real layout with assistive technologies you support.