next-navigation-guard
v0.1.1
Published
Navigation Guard for Next.js App Router and Pages Router.
Downloads
9,171
Readme
next-navigation-guard
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!
Demo
https://layerxcom.github.io/next-navigation-guard/
How does it work?
Installation
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> ); }
Usage
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.