@yaredfall/next-navigation-guards
v0.0.3
Published
Navigation guards for Next.js app.
Readme
next-navigation-interception
Navigation guards for Next.js app.
For Next.js 13+ with App Router
Install
npm i @yaredfall/next-navigation-guardsFeatures
- confirm navigation through
Linkcomponent and app router methods (push,replaceand others) - confirm navigation through browser back and forward buttons (
popstateevents) - confirm page leave on tab refresh/close (
beforeunloadevent)
Usage
Wrap your application with NavigationGuardsProvider:
// src/app/layout.tsx
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
<NavigationGuardsProvider>{children}</NavigationGuardsProvider>
</body>
</html>
);
}Use useNavigationGuards to guard navigation events in any part of your application:
// src/app/demo/page.tsx
"use client";
import { useCallback } from "react";
import { useNavigationInterceptors } from "@yaredfall/next-navigation-guards";
export default function Page() {
// Confirm with function
useNavigationGuards({
// you can disable guards dynamically
enabled: form.isDirty,
// you can provide any function that resolves to boolean
confirm: () => confirm("Are you sure?"),
});
return <div>User will be prompted before page leave</div>;
}// src/app/demo/page.tsx
"use client";
import { useCallback } from "react";
import { useNavigationInterceptors } from "@yaredfall/next-navigation-guards";
export default function Page() {
// Confirm with custom logic
const guards = useNavigationGuards({
enabled: form.isDirty,
});
return (
<div>
<div>Guarded page</div>
{guards.active && (
<div>
<p>Are you sure you want to leave this page?</p>
<button onClick={guards.accept}>Yes</button>
<button onClick={guards.reject}>No</button>
</div>
)}
</div>
);
}You can have multiple guards. They will be executed in order of render.