react-page-exit-confirmation v0.0.1

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

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}
/>