useScrollLock

Custom hook to lock and unlock page scrolling.


function Example() {
  const { scrollLocked, lockScroll, unlockScroll } = useScrollLock();

  return (
    <Button onClick={() => (scrollLocked ? unlockScroll() : lockScroll())}>
      {scrollLocked ? "Unlock" : "Lock"} scroll
    </Button>
  );
}

Usage

import { useScrollLock } from "reshaped";

Overlay utility component is using useScrollLock internally, so you don’t have to worry about the scrolling if you’re displaying the content inside the Overlay.

Overlay

Related utility

Locking page scrolling is typically implemented when displaying content on top of the page to prevent users from scrolling the background until the content is closed. You can experiment with the following demo to observe how it functions:


function Example() {
  const { scrollLocked, lockScroll, unlockScroll } = useScrollLock();

  return (
    <View gap={3} direction="row">
      <Button onClick={() => lockScroll()}>Lock scroll</Button>
      <Button onClick={() => unlockScroll()}>Unlock scroll</Button>
    </View>
  );
}

Arguments and return value

() => ({
  scrollLocked: boolean,
  lockScroll: () => {},
  unlockScroll: () => {},
});

Contents

Usage
Arguments and return value