You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
overseerr/src/hooks/useLockBodyScroll.ts

29 lines
797 B

import { useEffect } from 'react';
/**
* Hook to lock the body scroll whenever a component is mounted or
* whenever isLocked is set to true.
*
* You can pass in true always to cause a lock on mount/dismount of the component
* using this hook.
*
* @param isLocked Toggle the scroll lock
* @param disabled Disables the entire hook (allows conditional skipping of the lock)
*/
export const useLockBodyScroll = (
isLocked: boolean,
disabled?: boolean
): void => {
useEffect(() => {
const originalStyle = window.getComputedStyle(document.body).overflow;
if (isLocked && !disabled) {
document.body.style.overflow = 'hidden';
}
return () => {
if (!disabled) {
document.body.style.overflow = originalStyle;
}
};
}, [isLocked, disabled]);
};