wise-white•5mo ago

is there a way to detect when the user is about to navigate away?

Is there a way to detect when the user is about to navigate to a different page? I am making a custom unsaved changes notifier

3 Replies

kapa.ai•5mo ago

Hi @Syn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, Refine provides a way to detect when a user is about to navigate away from the current page without saving changes. This is done using the UnsavedChangesNotifier component and the warnWhenUnsavedChanges feature. The UnsavedChangesNotifier component enables the warnWhenUnsavedChanges feature of Refine. It shows a warning message when a user tries to navigate away from the current page without saving changes. It also checks for the beforeunload event to warn the user when they try to close the browser tab or window. To enable this feature, you need to place the UnsavedChangesNotifier component inside the <Refine> component's children and set the warnWhenUnsavedChanges option to true. Here is an example of how to use it:

import { Refine } from "@refinedev/core";  
import { routerProvider, UnsavedChangesNotifier } from "@refinedev/react-router-v6";  
import { BrowserRouter, Routes } from "react-router-dom";  
  
const App = () => (  
 <BrowserRouter>  
 <Refine  
 // ...  
 routerProvider={routerProvider}  
 options={{  
 warnWhenUnsavedChanges: true,  
 }}  
 >  
 <Routes>{/* ... */}</Routes>  
 {/* The `UnsavedChangesNotifier` component should be placed under <Refine /> component. */}  
 <UnsavedChangesNotifier />  
 </Refine>  
 </BrowserRouter>  
);

import { Refine } from "@refinedev/core";  
import { routerProvider, UnsavedChangesNotifier } from "@refinedev/react-router-v6";  
import { BrowserRouter, Routes } from "react-router-dom";  
  
const App = () => (  
 <BrowserRouter>  
 <Refine  
 // ...  
 routerProvider={routerProvider}  
 options={{  
 warnWhenUnsavedChanges: true,  
 }}  
 >  
 <Routes>{/* ... */}</Routes>  
 {/* The `UnsavedChangesNotifier` component should be placed under <Refine /> component. */}  
 <UnsavedChangesNotifier />  
 </Refine>  
 </BrowserRouter>  
);

The UnsavedChangesNotifier component has two optional properties: - translationKey: The translation key for the warning message. Default value is warnWhenUnsavedChanges. Useful when you use an i18n provider. - message: The warning message. Default value is Are you sure you want to leave? You have unsaved changes. Useful when you don't use an i18n provider. For more information, you can check the documentation here (https://refine.dev/docs/routing/integrations/react-router#unsavedchangesnotifier), here (https://refine.dev/docs/routing/integrations/next-js#unsavedchangesnotifier), and here (https://refine.dev/docs/routing/integrations/remix#additional-components). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@183085423604662273> kapa.ai is still learning and improving, please let us know how it did by reacting below

genetic-orange•5mo ago

Hello @Syn,
you can check our source code https://github.com/refinedev/refine/blob/4d76a96b068bb633046c5bb3aaef0981521b1898/packages/react-router-v6/src/unsaved-changes-notifier.tsx#L19 https://github.com/refinedev/refine/blob/4d76a96b068bb633046c5bb3aaef0981521b1898/packages/remix/src/unsaved-changes-notifier.tsx#L32 https://github.com/refinedev/refine/blob/4d76a96b068bb633046c5bb3aaef0981521b1898/packages/nextjs-router/src/pages/unsaved-changes-notifier.tsx#L43