`useScrollLock`

Locks document scrolling while active is true. Multiple consumers may call this at once (e.g. nested modals); scrolling is restored only after the last lock is released. Compensates for the disappearing scrollbar by adding equivalent padding to <body> to prevent layout shift.

Used internally by Modal, Drawer, and Dropdown.


import { useState } from 'react'
import { useScrollLock } from '@wire-ui/react'
 
function Drawer() {
  const [open, setOpen] = useState(false)
 
  useScrollLock(open)
 
  return (
    <>
      <button onClick={() => setOpen(true)}>Open drawer</button>
      {open && (
        <div role="dialog">
          <button onClick={() => setOpen(false)}>Close</button>
        </div>
      )}
    </>
  )
}

Parameters

Param	Type	Description
`active`	`boolean`	When `true`, the lock is held for as long as the component is mounted.