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?
5 Replies
Hi @.simoneb. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
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
Prompt
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 Prompt
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 Prompt
component with refine. However, you can refer to the router provider's documentation for more information on how to use the Prompt
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
:speech_balloon:
----------------------<@539513465103056900> kapa.ai is still learning and improving, please let us how it did by reacting below
extended-yellow•15mo ago
Hey @.simoneb,
You can checkout the <UnsavedChangeNotifier/> component. You can find more information here: https://refine.dev/docs/packages/documentation/routers/react-router-v6/#unsavedchangesnotifier
React Router v6 | refine
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.
provincial-silver•13mo ago
I'll check thanks
Hi @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.
extended-yellow•13mo ago
Hey @.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
GitHub
refine/packages/react-router-v6/src/unsaved-changes-notifier.tsx at...
Build your React-based CRUD applications, without constraints. 🌟 Star to support our work! - refinedev/refine