Add browser window beforeunload alert support

Author: xJkit

package.json

@@ -26,7 +26,8 @@
     "deploy": "gh-pages -d example/build"
   },
   "dependencies": {
-    "invariant": "^2.2.4"
+    "invariant": "^2.2.4",
+    "prop-types": "^15.6.1"
   },
   "peerDependencies": {
     "react": ">=16.3.0",
@@ -62,12 +63,21 @@
     "rollup-plugin-postcss": "^1.1.0",
     "rollup-plugin-url": "^1.3.0"
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "jest": {
     "setupTestFrameworkScriptFile": "<rootDir>/scripts/jest.setup.js",
-    "testMatch": ["<rootDir>/__tests__/*.spec.js"],
-    "collectCoverageFrom": ["src/**/*.{js,jsx}"],
+    "testMatch": [
+      "<rootDir>/__tests__/*.spec.js"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx}"
+    ],
     "coverageDirectory": "coverage",
-    "coverageReporters": ["html", "lcov"]
+    "coverageReporters": [
+      "html",
+      "lcov"
+    ]
   }
 }

src/index.js

@@ -1,4 +1,5 @@
 import React, { Fragment, createFactory } from 'react';
+import PropTypes from 'prop-types';
 import { Prompt as ReactRouterPrompt } from 'react-router';
 import invariant from 'invariant';
 
@@ -76,13 +77,48 @@ export const withGoodBye = BaseRouterComponent => {
   return WithGoodBye;
 };
 
-export default ({ when = false, children }) => {
-  return (
-    <Fragment>
-      <ReactRouterPrompt when={when} message="" />
-      <GoodByeContext.Consumer>
-        {renderProps => children({ ...renderProps })}
-      </GoodByeContext.Consumer>
-    </Fragment>
-  );
+class GoodBye extends React.Component {
+  handleBeforeUnload = evt => {
+    const { alertMessage } = this.props;
+    evt.returnValue = alertMessage;
+    return alertMessage;
+  };
+
+  componentDidUpdate() {
+    const { when, alertBeforeUnload } = this.props;
+    window.onbeforeunload = when && alertBeforeUnload
+      ? this.handleBeforeUnload
+      : null;
+  }
+
+  componentWillUnmount() {
+    window.onbeforeunload = null;
+  }
+
+  render() {
+    const { when, children } = this.props;
+    return (
+      <Fragment>
+        <ReactRouterPrompt when={when} message="" />
+        <GoodByeContext.Consumer>
+          {renderProps => children({ ...renderProps })}
+        </GoodByeContext.Consumer>
+      </Fragment>
+    );
+  }
+}
+
+GoodBye.propTypes = {
+  when: PropTypes.bool,
+  alertBeforeUnload: PropTypes.bool,
+  alertMessage: PropTypes.string,
+  children: PropTypes.func.isRequired,
+};
+
+GoodBye.defaultProps = {
+  when: false,
+  alertBeforeUnload: false,
+  alertMessage: '' // only work for IE
 };
+
+export default GoodBye;

yarn.lock

@@ -4204,7 +4204,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.4, prop-types@^15.6.0:
+prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.1:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
   dependencies: