You use Next.js, and you want to show "You have unsaved changes that will be lost." dialog when user leaves page? This library is just for you!
https://layerxcom.github.io/next-navigation-guard/
npm install next-navigation-guard
# or
yarn install next-navigation-guard
# or
pnpm install next-navigation-guardApp Router: app/layout.tsx
<html lang="en">
<body className={`${geistSans.variable} ${geistMono.variable}`}>
<NavigationGuardProvider>{children}</NavigationGuardProvider>
</body>
</html>Page Router: page/_app.tsx
export default function MyApp({ Component, pageProps }: AppProps) {
return (
<NavigationGuardProvider>
<Component {...pageProps} />
</NavigationGuardProvider>
);
}window.confirm()
useNavigationGuard({ enabled: form.changed, confirm: () => window.confirm("You have unsaved changes that will be lost.") })Custom dialog component
const navGuard = useNavigationGuard({ enabled: form.changed })
return (
<>
<YourContent />
<Dialog open={navGuard.active}>
<DialogText>You have unsaved changes that will be lost.</DialogText>
<DialogActions>
<DialogButton onClick={navGuard.reject}>Cancel</DialogButton>
<DialogButton onClick={navGuard.accept}>Discard</DialogButton>
</DialogActions>
</Dialog>
</>
)See working example in example/ directory and its NavigationGuardToggle component.