Render modal window to confirm page leave
npm install react-leave-page-confirmThe 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
# 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 hookProps
| 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 consumerArgument (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
`typescript
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) => {
const { value } = e.target
setUserName(value)
if (value !== initialValues.userName) {
setIsDataChanged(true)
} else {
setIsDataChanged(false)
}
}
return (
);
}
`
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`)