useLockBodyScroll

Prevent scrolling of the body element.

Browser

API Reference

terminal

pnpm add @shak-hooks/usehooks

import.ts

import { useLockBodyScroll } from "@shak-hooks/usehooks";

Source: packages/react/src/useLockBodyScroll.ts

signature.ts

export function useLockBodyScroll(locked: boolean = true)

Name	Type	Optional	Default
locked	boolean	Yes	true

unknown

use-lock-body-scroll.ts

1import { useLayoutEffect } from "react";

3export function useLockBodyScroll() {

4 useLayoutEffect(() => {

5 const originalStyle = window.getComputedStyle(document.body).overflow;

6 document.body.style.overflow = "hidden";

7 return () => {

8 document.body.style.overflow = originalStyle;

9 };

10 }, []);

11}

Google Ads

example.tsx

1import { useLockBodyScroll } from "@shak-hooks/usehooks";

3const result = useLockBodyScroll(undefined);

4// result: unknown

5// Use values directly (React state).