Signature
Pass the dialog open state and setter. Optional key isolates multiple dialogs on one page.
- open — whether the dialog is open
- onOpenChange — same callback you pass to Dialog / ResponsiveDialog
- key? — optional history-state key when several dialogs coexist
TSsignature
1function useMobileBackDialog(options: {
2 open: boolean;
3 onOpenChange: (open: boolean) => void;
4 key?: string;
5}): void;Usage
Call once next to your dialog state. Desktop behavior is unchanged.
TSXdialog
1import {
2 Dialog,
3 DialogContent,
4 useMobileBackDialog,
5} from "@quan-erp/shared-ui";
6import { useState } from "react";
7
8export function EditBranchDialog() {
9 const [open, setOpen] = useState(false);
10 useMobileBackDialog({ open, onOpenChange: setOpen });
11
12 return (
13 <Dialog open={open} onOpenChange={setOpen}>
14 <DialogContent>{/* form */}</DialogContent>
15 </Dialog>
16 );
17}Notes
- Intended for mobile WebView / Capacitor shells where back is a hardware or gesture action
- Use with Responsive Dialog when the same flow is a sheet on phone and a dialog on desktop
- Give each concurrent dialog a distinct key