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?

- English Slide
- Japanese Slide

Installation

``bash
npm install next-navigation-guard


or

yarn install next-navigation-guard

or

pnpm install next-navigation-guard
`

- App Router: app/layout.tsx

`tsx

${geistSans.variable} ${geistMono.variable}}>
{children}


`

- Page Router: page/_app.tsx

`tsx
export default function MyApp({ Component, pageProps }: AppProps) {
return (



);
}
`

Usage

- window.confirm()

`tsx
useNavigationGuard({ enabled: form.changed, confirm: () => window.confirm("You have unsaved changes that will be lost.") })
`

- Custom dialog component

`tsx
const navGuard = useNavigationGuard({ enabled: form.changed })

return (
<>


You have unsaved changes that will be lost.

Cancel
Discard



)
`

See working example in example/ directory and its NavigationGuardToggle` component.