import * as React from "react"
 
import { useScrollBlocker } from "@/hooks/use-scroll-blocker"
 
function Modal() {
  const [isOpen, setIsOpen] = React.useState(false)
  const { block, unblock } = useScrollBlocker()
 
  const handleOpen = () => {
    setIsOpen(true)
    block()
  }
 
  const handleClose = () => {
    setIsOpen(false)
    unblock()
  }
 
  return (
    <>
      <button onClick={handleOpen}>Open Modal</button>
      {isOpen && (
        <div className="modal">
          <button onClick={handleClose}>Close</button>
        </div>
      )}
    </>
  )
}

import { useScrollBlocker } from "@/hooks/use-scroll-blocker"
 
function MyModal() {
  const [open, setOpen] = React.useState(false)
  const { block, unblock } = useScrollBlocker()
 
  React.useEffect(() => {
    if (open) {
      block()
    } else {
      unblock()
    }
  }, [open, block, unblock])
 
  return (
    <>
      <button onClick={() => setOpen(true)}>Open</button>
      {open && (
        <div className="modal">
          <button onClick={() => setOpen(false)}>Close</button>
        </div>
      )}
    </>
  )
}

import { useScrollBlocker } from "@/hooks/use-scroll-blocker"
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"
 
function MyDialog() {
  const [open, setOpen] = React.useState(false)
  const { block, unblock } = useScrollBlocker()
 
  React.useEffect(() => {
    if (open) {
      block()
    } else {
      unblock()
    }
  }, [open, block, unblock])
 
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger>Open Dialog</DialogTrigger>
      <DialogContent>
        <p>Dialog content</p>
      </DialogContent>
    </Dialog>
  )
}

function App() {
  const [modal1Open, setModal1Open] = React.useState(false)
  const [modal2Open, setModal2Open] = React.useState(false)
  const { block, unblock } = useScrollBlocker()
 
  React.useEffect(() => {
    if (modal1Open || modal2Open) {
      block()
    } else {
      unblock()
    }
  }, [modal1Open, modal2Open, block, unblock])
 
  return (
    <>
      <button onClick={() => setModal1Open(true)}>Open Modal 1</button>
      <button onClick={() => setModal2Open(true)}>Open Modal 2</button>
      {/* modals */}
    </>
  )
}