0

i have a form, so when the user clicks on refresh(ctrl + r, icon on the browser) or close button of the browser. I need to show a custom modal box not the browser prompt box.

in the custom modal box it will show that message "data is going to loss", having two buttons ok and cancel

once the user clicks on the okay it should got home route and cancel it should stay in the page.

i am able to see the browser prompt box for refresh and close, how can i use my custom modal and implement it for the refresh and close actions. Across browser specific.

also the browser prompt message is Changes that you made may not be saved." i am not able to pass custom message and i need okay button and cancel but getting cancel and reload.

See the below implemetation code.

// Form component
import React from 'react'
import CustomPrompt from './Prompt';
import Form from './Form';


const formComponent = (props) => {
    return (
     <CustomPrompt >
      <Form data={props.data}/>
     <CustomPrompt />
    )
}

export default formComponent


// CustomPrompt

import React, {Component} from 'react';
import {Prompt} from 'react-router-dom';

class CustomPrompt extends Component{
    componentWillMount(){
        onbeforeunload = e => 'Dont leave'
    }

    componentWillUnmount(){
        onbeforeunload = null
    }

    render(){
        return (
            <div>
                <Prompt when={true} message={location => location.path('/home')} />
                {
                    this.props.children
                }
            </div>
        )
    }
}


export default CustomPrompt;

how can i create a custom modal and override the existing modal of browser on refresh and close.

Any help appreciated :)

Learner
  • 8,379
  • 7
  • 44
  • 82
  • Unfortunately you can't overrider browser default alert during reload and quit: Check this for more details https://stackoverflow.com/questions/52437195/reactrouter-v4-prompt-override-default-alert/52437325#52437325. The only thing that you can do is to not allow the browser to navigate away by showing prompt, if the user still navigates away, he/she will lose the data – Shubham Khatri Apr 04 '19 at 10:01

1 Answers1

2

Unfortunately that's not possible (because there must always be a way for the user to close a tab/window).

The only thing you can do in onbeforeunload is 

event.preventDefault();
event.returnValue = 'Some browsers display this to the user';

and it will then show the browser confirmation box. Depending on the browser, it may or may not show your custom message (if they don't, it's sometimes used for deceptive purposes). Depending on configuration, the browser may not show the confirmation at all but just unload the page.

AKX
  • 152,115
  • 15
  • 115
  • 172
  • I dont know whether i am asking a bad question, but i am giving the user two have cancel or okay. so if he clicks okay the browser can be closed for the close action. and for refresh he will redirect to home page ? is that possible – Learner Apr 04 '19 at 09:59
  • You can't know whether the user hit refresh or is closing the tab either. – AKX Apr 04 '19 at 10:01
  • also if its not possible where should add the onbeforeunload in my code snppiet and how can i refactor it – Learner Apr 04 '19 at 10:01
  • so there is no event which tells that the user clicked close or refresh ? is that what you meant – Learner Apr 04 '19 at 10:02
  • Yes. All you get to know is the user is unloading your page in some way. – AKX Apr 04 '19 at 10:03
  • I'm not sure how you want to refactor it. – AKX Apr 04 '19 at 10:05
  • event.preventDefault(); event.returnValue = 'Some browsers display this to the user'; where should i add the code in the above snippet – Learner Apr 04 '19 at 10:07