national-gold
national-gold12mo ago

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
kapa.ai
kapa.ai12mo ago
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:
import { Refine } from "@pankod/refine";
import routerProvider from "@refinedev/react-router-v6";

const App: React.FC = () => {
return <Refine routerProvider={routerProvider} />;
};
import { Refine } from "@pankod/refine";
import routerProvider from "@refinedev/react-router-v6";

const App: React.FC = () => {
return <Refine routerProvider={routerProvider} />;
};
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: ----------------------
kapa.ai
kapa.ai12mo ago
<@539513465103056900> kapa.ai is still learning and improving, please let us how it did by reacting below
ambitious-aqua
ambitious-aqua12mo 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.
national-gold
national-gold10mo 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.
ambitious-aqua
ambitious-aqua10mo 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