Unsave Provider

Context provider that handles unsaved changes with toasts, drawers, and modals.

Live Demo

Edit the form, then navigate away. Toast appears on desktop, drawer on mobile, modal for page navigation.

/about••

Components

1

Desktop Toast

Bottom center floating toast

Unsaved changes
2

Mobile Drawer

Slides up from bottom

Unsaved changes
3

Navigation Modal

Confirmation for cross-page

Unsaved changes

You have unsaved changes that will be lost if you leave this page. Would you like to save before leaving?

4

Before Unload

Browser prompt on refresh
beforeunload

Installation

shadcn/ui
npx shadcn@latest add https://raw.githubusercontent.com/gluer-space/unsave-provider/main/public/r/registry.json
Manual
cp components/unsave-provider.tsx your-project/

Usage

1. Wrap your app
<UnsavedChangesProvider>
  {children}
</UnsavedChangesProvider>
2. Use in components
const { setDirty, isDirty } = useUnsavedChanges({
  onSave: async () => { await save(); },
  onCancel: () => { reset(); },
});

onChange={() => setDirty(true)}

Try it out

Navigate to /about to see it work on another page.