react-leave-page-confirm

The package was written to cover the case when a user try to leave page with changes that may be lost (e.g forms). It is based on awesome libs React and Material-UI

The package prevents browser history changes as well as page reload

Unfortunately modal window can be customized only for browser history changes due to some limitations: custom message deprecation

Installation

  # with npm
  npm install react-leave-page-confirm

  # with yarn
  yarn add react-leave-page-confirm

Usage

There are two possible options how the package can be used:

• ConfirmPageLeave component
• usePageLeaveBlocker hook

ConfirmPageLeave is the simplest way to consume package, it contains all necessary UI parts to render modal dialog window. Under the hood it uses usePageLeaveBlocker hook

Props

Prop	Type	Required	Description
isActive	boolean	true	active logic to prevent page leave and display confirm modals on history change / page reload
history	HashHistory | BrowserHistory | MemoryHistory	true	history object created by history package
title	string	false	optional title for modal dialog (history change only)
message	string	false	optional message in modal dialog (history change only)

---

usePageLeaveBlocker requires that modal dialog for history change case together with logic to open/close it was written by consumer

Argument (object)

Field	Type	Required	Description
isActive	boolean	true	active logic to prevent page leave and display confirm modals on history change / page reload
history	HashHistory | BrowserHistory | MemoryHistory	true	history object created by history package
onHistoryChange	(event: Transition, isBlocked: boolean) => void	true	callback that fires whenever history change event happened, second argument describes if this change is blocked (useful to trigger logic to open/close modal)

Examples

import React, { ChangeEvent, } from 'react';
import { createBrowserHistory} from 'history'
import { ConfirmPageLeave } from 'react-leave-page-confirm'

const history = createBrowserHistory();

const initialValues = {
  userName: '',
}

export const  App = () => {
  const [isDataChanged, setIsDataChanged] = React.useState(false);
  const [userName, setUserName ] = React.useState('')

  const handleUserNameChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { value } = e.target

    setUserName(value)

    if (value !== initialValues.userName) {
      setIsDataChanged(true)
    } else {
      setIsDataChanged(false)
    }
  }

  return (
    <div className="App">
      <form>
        <input value={userName} onChange={handleUserNameChange} />
        <button type="submit">submit</button>
      </form>

      <a href="/test" onClick={(e: React.MouseEvent) => { 
        e.preventDefault(); 
        history.push(`/test`)}}
      >
        link to test page
      </a>

      <ConfirmPageLeave isActive={isDataChanged} history={history} />
    </div>
  );
}

in the example above neither page refresh nor link won't work without confirmation modal dialog in case value in "input" HTML element is changed (isDataChanged === true)