import { useEffect , useState } from 'react' ; import { getScrollbarWidth } from '@/utils/browser' ; type ReturnType = [ boolean , ( locked : boolean ) => void ] ; export function useLockedBody ( initialLocked = false ) { const [ locked , setLocked ] = useState ( initialLocked ) ; useEffect ( ( ) => { if ( ! locked ) { return undefined ; } const originalOverflow = document . body . style . overflow ; const originalPaddingRight = document . body . style . paddingRight ; const scrollBarWidth = getScrollbarWidth ( ) ; if ( scrollBarWidth ) { document . body . style . paddingRight = `${ scrollBarWidth }px` ; } document . body . style . overflow = 'hidden' ; return ( ) => { if ( scrollBarWidth ) { document . body . style . paddingRight = originalPaddingRight ; } document . body . style . overflow = originalOverflow ; } ; } , [ locked ] ) ; useEffect ( ( ) => { if ( locked !== initialLocked ) { setLocked ( initialLocked ) ; } } , [ initialLocked ] ) ; return [ locked , setLocked ] ; }