helpful-purple•14mo 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•14mo 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•14mo ago

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

national-gold•14mo 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.

helpful-purple•12mo 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.

national-gold•12mo 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