Function: default()¶

default(props): Element

Defined in: src/components/warnings/DirtyFormNavigation.tsx:52

Dirty Form Navigation Warning Component

Displays a confirmation modal when a user attempts to navigate away from a form with unsaved changes. Provides options to stay on the page or proceed with navigation (discarding changes).

Parameters¶

props¶

DirtyFormNavigationProps

Component props

Returns¶

Element

Modal component for navigation confirmation

Example¶

const [dirty, setDirty] = useState(false);
const blocker = useBlocker(
  ({ currentLocation, nextLocation }) =>
    dirty && currentLocation.pathname !== nextLocation.pathname
);

<DirtyFormNavigation
  blocker={blocker}
  onProceed={() => setDirty(false)}
/>