react-page-exit-confirmation

A confirmation modal that triggers when you route or exit the page.

Getting Started

npm install react-page-exit-confirmation --save

import PageExitConfirmation from 'react-page-exit-confirmation';

Demo

https://cicada1992.github.io/react-page-exit-confirmation/

Used code in demo

const shouldConfirm = true;
const modalContent = (
  <>
    <div>You have unsaved changes that will be lost if you leave.</div>
    <div>Is it okay?</div>
  </>
)

<PageExitConfirmation
  shouldConfirm={shouldConfirm}
  history={history}
  modalHeader="Leave this page?"
  modalContent={modalContent}
  modalStyle={{
    background: "#fff",
    borderRadius: 0
  }}
  leaveButtonStyle={{ background: "#5d95ff", color: "#fff" }}
/>

Props

| Property | Type | Required? | Description | Default Value |:---|:---|:---:|:---|:---| | shouldConfirm | boolean | ✓ | Condition to show confirmation dialog | history | Pick<RouteComponentProps, "history"> | ✓ | History object to route (react-router-dom) | modalHeader | React.ReactNode | | Modal header (text | element) | Leave this page? | modalContent | React.ReactNode | | Modal content (text | element) | You have unsaved changes that will be lost if you leave. | modalStyle | React.CSSProperties | | Custom modal style | Refer DEFAULT_MODAL_STYLE | leaveButtonStyle | React.CSSProperties | | Custom leave btn style | Refer DEAFULT_BUTTON_STYLE | cancelButtonStyle | React.CSSProperties | | Custom cancel btn style | Refer DEAFULT_BUTTON_STYLE

const DEFAULT_MODAL_STYLE = {
  top: "50%",
  left: "50%",
  right: "auto",
  bottom: "auto",
  width: 500,
  padding: "30px 20px",
  transform: "translate(-50%, -50%)",
  boxShadow: "0 4px 14px 0 rgba(0, 0, 0, 0.37)"
};

const DEAFULT_BUTTON_STYLE = {
  width: 90,
  height: 30
};

Simple Example

<PageExitConfirmation
  shouldConfirm={shouldConfirm}
  history={history}
/>