NavigationBlocker

Storybook

Go to Story

NavigationBlockerProps

Defined in: packages/design-system/src/components/NavigationBlocker/NavigationBlocker.tsx:23

Extends

• Omit<ComponentProps<typeof Dialog>, "open">

Properties

Property	Type	Description	Inherited from	Defined in
children?	ReactNode	-	ConfirmDeleteDialogProps.children	node_modules/@radix-ui/react-dialog/dist/index.d.mts:14
defaultOpen?	boolean	-	ConfirmDeleteDialogProps.defaultOpen	node_modules/@radix-ui/react-dialog/dist/index.d.mts:16
onOpenChange?	(open) => void	-	Omit.onOpenChange	node_modules/@radix-ui/react-dialog/dist/index.d.mts:17
modal?	boolean	-	ConfirmDeleteDialogProps.modal	node_modules/@radix-ui/react-dialog/dist/index.d.mts:18
enableBeforeUnload?	boolean	Controls whether the native browser beforeunload prompt should be enabled. When true and shouldBlock is true, a native prompt will appear on page reload/close. Default false	-	packages/design-system/src/components/NavigationBlocker/NavigationBlocker.tsx:33
shouldBlock?	boolean	Indicates whether there are unsaved changes that should block navigation.	-	packages/design-system/src/components/NavigationBlocker/NavigationBlocker.tsx:35
status?	BlockerStatus	When set to "blocked", the confirmation dialog is shown.	-	packages/design-system/src/components/NavigationBlocker/NavigationBlocker.tsx:37
proceed?	() => void	When status is blocked, this function allows navigation to continue.	-	packages/design-system/src/components/NavigationBlocker/NavigationBlocker.tsx:39
reset?	() => void	When status is blocked, this function cancels navigation (status will be reset to 'idle')	-	packages/design-system/src/components/NavigationBlocker/NavigationBlocker.tsx:41
title?	ReactNode	-	-	packages/design-system/src/components/NavigationBlocker/NavigationBlocker.tsx:42
description?	ReactNode	-	-	packages/design-system/src/components/NavigationBlocker/NavigationBlocker.tsx:43
stayLabel?	ReactNode	-	-	packages/design-system/src/components/NavigationBlocker/NavigationBlocker.tsx:44
leaveLabel?	ReactNode	-	-	packages/design-system/src/components/NavigationBlocker/NavigationBlocker.tsx:45

---

BlockerStatus

type BlockerStatus = "idle" | "blocked";

Defined in: packages/design-system/src/components/NavigationBlocker/NavigationBlocker.tsx:21

---

NavigationBlocker()

function NavigationBlocker(__namedParameters): Element;

Defined in: packages/design-system/src/components/NavigationBlocker/NavigationBlocker.tsx:94

A small confirmation dialog to guard against accidental navigation when there are unsaved changes. This component is router-agnostic. It does not import or depend on any specific router library.

Parameters

Parameter	Type
__namedParameters	NavigationBlockerProps

Returns

Element

Examples

import { useBlocker } from "@tanstack/react-router";
const blocker = useBlocker({
  shouldBlockFn: (location, action) => {
    // block if there are unsaved changes and the user is trying to navigate away
    return formState.isDirty && action !== "replace";
  },
  withResolver: true,
  enableBeforeUnload: true,
});
return (
  <NavigationBlocker
    status={blocker.status}
    proceed={blocker.proceed}
    reset={blocker.reset}
  />
);

// The `enableBeforeUnload` prop enables a native browser prompt on page reload/close.
const [dirty, setDirty] = useState(false);
return (
  <>
    <NavigationBlocker shouldBlock={dirty} enableBeforeUnload />
     <form
      onChange={() => setDirty(true)}
      onSubmit={(e) => {
        e.preventDefault();
        // save...
        setDirty(false);
      }}
    >
      <input name="displayName" />
      <button type="submit">Save</button>
    </form>
  </>
);