nixegend / react-beforeunload-component

React before unload component

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.