useBeforeClose

Modals can prevent themselves from closing by using useBeforeClose. If the provided callback returns false the modal will not close.


import { useBeforeClose } from "@/components/ui/modal";
 
export default function PreventingClose() {
  const [canClose, setCanClose] = useState(true);
 
  useBeforeClose((closeValue) => {
    // You can access the close value passed from props close(value) function.
    console.log("useBeforeClose", closeValue);
    return canClose;
  });
}

Typescript

If you’re using TypeScript, you can type the useBeforeClose callback parameter based on the close type.


// optional
type CloseValue = "cancel" | "confirm";
 
interface MyModalProps extends ModalProps<CloseValue> {
  //...
}
 
useBeforeClose<CloseValue>((val) => {
  //val is typed as CloseValue
  return true;
});

Or if you use a generic modal component


// 📄 confirm-modal.tsx ---------------------
 
type CloseValue = "cancel" | "confirm";
 
interface MyModalProps extends ModalProps<CloseValue> {
  // ...
}
 
props.close("confirm");
 
// 📄 modal-component.tsx ---------------------
 
useBeforeClose<Parameters<typeof props.close>[0]>((val) => {
  //val is typed as CloseValue
  return true;
});