How to prevent reload and show custom popup ?

My application is developed in react. I have a form , when my user tries to reload I have to disable brower's
default popup and show my own custom popup.

I tried with "onbeforeunload" and "beforeunload" events , I can able to prevent brower's default popup by giving window.onbeforeunload = null;

But I have to prevent brower's default alert and show my custom alert with ok and cancel button.

Is there anyway I can detect my brower is getting reloaded ?

Can someone help me on this.Thanks in advance.