How can I add a Prompt router component to forms?
I want to add a Prompt behaviour on page leave (I'm using React-hook-form) I've tried the Prompt component but it requires to be rendered inside a Router. How can I do that with refine?
KHi @.simoneb. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. 
K----------------------
Refine uses a customized Router Provider to save routes and navigate between pages. To add a Prompt behavior on page leave, you need to use the component provided by the router provider you're using in your refine project.
First, make sure you have a router provider set up in your project. Here's an example of setting up a router provider with React Router:
Once you have the router provider set up, you can use the component from the router provider in your component where you want to add the behavior. Unfortunately, the provided extracts do not include an example of using the component with refine. However, you can refer to the router provider's documentation for more information on how to use the component.
For more information on router providers in refine, you can refer to this extract: Refine vs AdminBro - Comparison Admin Panel Framework (https://refine.dev/blog/refine-vs-adminbro).
----------------------
----------------------
Refine uses a customized Router Provider to save routes and navigate between pages. To add a Prompt behavior on page leave, you need to use the component provided by the router provider you're using in your refine project.
First, make sure you have a router provider set up in your project. Here's an example of setting up a router provider with React Router:
Once you have the router provider set up, you can use the component from the router provider in your component where you want to add the behavior. Unfortunately, the provided extracts do not include an example of using the component with refine. However, you can refer to the router provider's documentation for more information on how to use the component.
For more information on router providers in refine, you can refer to this extract: Refine vs AdminBro - Comparison Admin Panel Framework (https://refine.dev/blog/refine-vs-adminbro).
----------------------
Note: you can ask me a follow up question by @ mentioning me again----------------------
K@539513465103056900 kapa.ai is still learning and improving, please let us how it did by reacting below
CHey @.simoneb,
You can checkout the <UnsavedChangeNotifier/> component. You can find more information here: https://refine.dev/docs/packages/documentation/routers/react-router-v6/#unsavedchangesnotifier
You can checkout the <UnsavedChangeNotifier/> component. You can find more information here: https://refine.dev/docs/packages/documentation/routers/react-router-v6/#unsavedchangesnotifier
refine provides router bindings and utilities for React Router v6. It is built on top of the react-router-dom package. This package will provide easy integration between refine and react-router-dom for both existing projects and new projects.
SI'll check thanks
SHi @salihozdemir , some time has passed from this but I've tested and it's actually working correctly 
thanks
Is it possible to customize it somehow? I want to show a customized modal window, not an alert message.
thanksIs it possible to customize it somehow? I want to show a customized modal window, not an alert message.
CHey @.simoneb,
You can do this with the useWarnAboutChange hook. This hook returns the warnWhen and setWarnWhen properties. When warnWhen is true, you can open your custom modal, and when the modal is closed, you can make it false with setWarnWhen.
You can get inspired by the source code to create your own UnsavedChangesNotifier component: https://github.com/refinedev/refine/blob/next/packages/react-router-v6/src/unsaved-changes-notifier.tsx
You can do this with the useWarnAboutChange hook. This hook returns the warnWhen and setWarnWhen properties. When warnWhen is true, you can open your custom modal, and when the modal is closed, you can make it false with setWarnWhen.
You can get inspired by the source code to create your own UnsavedChangesNotifier component: https://github.com/refinedev/refine/blob/next/packages/react-router-v6/src/unsaved-changes-notifier.tsx
GitHub
Build your React-based CRUD applications, without constraints. 
Star to support our work! - refinedev/refine
Star to support our work! - refinedev/refine