Unsaved-changes guard: a root provider plus a useUnsavedGuard hook. Warns before reload, tab close and in-app link navigation, and returns a guard(proceed) to wrap programmatic navigation in a confirm dialog.
"use client";
import * as React from "react";
import {
UnsavedGuardProvider,
useUnsavedGuard,
} from "@/components/ui/unsaved-guard";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
function UnsavedGuardDemoInner() {
const nameId = React.useId();
const [name, setName] = React.useState("Ada Lovelace");
const [savedName, setSavedName] = React.useState("Ada Lovelace");
const dirty = name !== savedName;
const guard = useUnsavedGuard({
when: dirty,
title: "Discard changes?",
description: "Your edits haven't been saved yet.",
confirmText: "Discard",
cancelText: "Keep editing",
});
return (
<form
onSubmit={(event) => {
event.preventDefault();
setSavedName(name);
}}
className="grid w-full max-w-sm gap-3"
>
<label htmlFor={nameId} className="text-sm font-medium">
Display name
</label>
<Input
id={nameId}
value={name}
onChange={(event) => setName(event.target.value)}
/>
<div className="flex items-center gap-3">
<Button type="submit" size="sm" disabled={!dirty}>
Save
</Button>
<Button
type="button"
variant="ghost"
size="sm"
onClick={() => void guard(() => setName(savedName))}
>
Discard
</Button>
<span className="text-xs text-muted-foreground">
{dirty ? "Unsaved changes" : "All changes saved"}
</span>
</div>
<p className="text-xs text-muted-foreground">
Edit the name, then close or reload this tab to see the guard prompt.
</p>
</form>
);
}
export default function UnsavedGuardDemo() {
return (
<UnsavedGuardProvider>
<UnsavedGuardDemoInner />
</UnsavedGuardProvider>
);
}
Part of Hirael — browse the full library on 21st.dev.