monday-ui-react-core/src/components/Modal/useBodyScrollLock.ts

Official monday.com UI resources for application development in React.js

import { useEffect } from "react";
import { clearAllBodyScrollLocks, disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
import { A11yDialogType } from "./ModalHelper";

export default function useBodyScrollLock({ instance }: { instance: A11yDialogType }) {
  // clear all scroll locks on unmount (just to be safe)
  useEffect(() => {
    return () => clearAllBodyScrollLocks();
  }, []);

  // lock body on modal show
  useEffect(() => {
    instance?.on("show", () => disableBodyScroll(instance.$el, { reserveScrollBarGap: true }));
    instance?.on("hide", () => enableBodyScroll(instance.$el));
    return () => {
      instance?.off("show");
      instance?.off("hide");
    };
  }, [instance]);
}