other-emerald•14mo ago

unsaved changes warning in custom component

aside Mui components I have another plugins in my form so I need to show this warning if i leave changes in that too. so can I connect those

9 Replies

kapa.ai•14mo ago

Hi @alfaz_muhammed. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can connect other plugins to your form and show warnings if there are unsaved changes. Refine provides a hook called useModalForm which allows you to manage a form within a modal. It provides some useful methods to handle the form modal, including a warnWhenUnsavedChanges property. Here is an example of how you can use it:

const {  
 modalProps: editModalProps,  
 formProps: editFormProps,  
 show: editModalShow,  
 } = useModalForm<IPost>({  
 action: "edit",  
 warnWhenUnsavedChanges: true,  
 });

const {  
 modalProps: editModalProps,  
 formProps: editFormProps,  
 show: editModalShow,  
 } = useModalForm<IPost>({  
 action: "edit",  
 warnWhenUnsavedChanges: true,  
 });

In this example, warnWhenUnsavedChanges: true will show a warning if there are unsaved changes when the user tries to leave the form. You can find more information about this in the Refine documentation (https://refine.dev/docs/api-reference/antd/hooks/form/useModalForm). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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

other-emerald•14mo ago

@kapa.ai I didn't mean that. Let's say I have a useState of boolean type. if it is true I want to show the warning on leaving can i do that

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: Sorry @alfaz_muhammed, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist: Perhaps try again in 15mins?

other-emerald•14mo ago

@kapa.ai I didn't mean that. Let's say I have a useState of boolean type. if it is true I want to show the warning on leaving can i do that

kapa.ai•14mo ago

other-emerald•14mo ago

@kapa.ai I didn't mean that. Let's say I have a useState of boolean type. if it is true I want to show the warning on leaving can i do that

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can use the useState hook to control the warnWhenUnsavedChanges property. You can set the state to true when you want to show the warning and false when you don't. Here's an example of how you can do this:

const [showWarning, setShowWarning] = useState(false);

const modalForm = useModalForm({  
 warnWhenUnsavedChanges: showWarning,  
});

const [showWarning, setShowWarning] = useState(false);

const modalForm = useModalForm({  
 warnWhenUnsavedChanges: showWarning,  
});

In this example, showWarning is a state variable that you can control. When showWarning is true, the warning will be shown when the user tries to leave the page with unsaved changes. When showWarning is false, the warning will not be shown. You can find more information about this in the Refine documentation (https://refine.dev/docs/api-reference/antd/hooks/form/useModalForm). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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