React Beforeunload Component
Beforeunload works when the document or React components are about to be unloaded.
Compatible
Gatsby, react-router, @reach/router, next.js and more..
Demo
Install
npm i --save react-beforeunload-component
Example
import React from 'react';
import BeforeUnloadComponent from 'react-beforeunload-component';
// React Hook
const Example = () => {
return (
<div>
<BeforeUnloadComponent
blockRoute={true}
/>
<form> ... </form>
<BeforeUnloadComponent />
</div>
);
}
....Example with your custom modal
import React from 'react';
import BeforeUnloadComponent from 'react-beforeunload-component';
import MyModal from 'path/MyModal';
// React Hook
const Example = () => {
return (
<div>
<BeforeUnloadComponent
blockRoute={true}
modalComponentHandler={({handleModalLeave, handleModalCancel})=>{
return (
<MyModal
onClose={handleModalCancel}
onSubmit={handleModalLeave}
/>
)
}}
/>
<form id="myform"> ... </form>
<BeforeUnloadComponent/>
</div>
);
}
....If you want to ignore some links you need to add an attribute:
<a custom-ignore={"true"} href="path">Path</a>or, you can ignore all the children links:
<BeforeUnloadComponent
ignoreChildrenLinks={true}
blockRoute={true}
modalComponentHandler={({handleModalLeave, handleModalCancel})=>{
....
}}
/>
<form id="myform"> ... </form>
<BeforeUnloadComponent/>API
| Name | Type | Default | Description |
|---|---|---|---|
blockRoute |
boolean |
true |
If it's false the router will not be blocked |
ignoreBeforeunloadDocument |
boolean |
false |
It ignores default reloading page alert. |
modalComponentHandler |
function |
window.confirm(...) |
You can use your custom modal component instead of the default alert. |
alertMessage |
string |
"Are you sure you want to leave? Changes will not be saved." |
If you don't want to use a React Modal Component you can use the default alert (Browsers defaults) with your own message. |
ignoreChildrenLinks |
boolean |
false |
If it's true is going to ignore all the children links |
beforeUnload |
function |
null |
Manage data before the component is unload |
beforeUnloadSendBeacon |
object |
null |
Manage data before the document is unload with sendBeacon( path, data). More info about sendBeacon, click here. |
Limitations
Ipad and Iphones browsers like safari and chrome don't trigger the event beforeunload, for this reason, when you want to reload the page the browser alert will not be shown. There's some work to do to patch this issue.