chore: 🤖 catch up with master

CHANGELOG.md

@@ -1,3 +1,18 @@
+## [13.25.1](https://github.com/streamich/react-use/compare/v13.25.0...v13.25.1) (2020-02-15)
+
+
+### Bug Fixes
+
+* 🐛 support default event in useClickAway() ([24281cd](https://github.com/streamich/react-use/commit/24281cdf042da5f83068c6108c67a36fe0cfc74d))
+* generic type on event arg in onClickAway callback on useClickAway ([4ffe454](https://github.com/streamich/react-use/commit/4ffe4542aec840bd6150223489d2c38821954336))
+
+# [13.25.0](https://github.com/streamich/react-use/compare/v13.24.1...v13.25.0) (2020-02-15)
+
+
+### Features
+
+* **useBeforeUnload:** allow passing a dirty function ([#842](https://github.com/streamich/react-use/issues/842)) ([c4a14a4](https://github.com/streamich/react-use/commit/c4a14a4fb370c7628e4cc5861e31cc64a66b64b0))
+
 ## [13.24.1](https://github.com/streamich/react-use/compare/v13.24.0...v13.24.1) (2020-02-15)
 
 

docs/useBeforeUnload.md

@@ -5,6 +5,8 @@ React side-effect hook that shows browser alert when user try to reload or close
 
 ## Usage
 
+### Boolean check
+
 ```jsx
 import {useBeforeUnload} from 'react-use';
 
@@ -20,3 +22,28 @@ const Demo = () => {
   );
 };
 ```
+
+### Function check
+
+Note: Since every `dirtyFn` change registers a new callback, you should use
+[refs](https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback)
+if your test value changes often.
+
+```jsx
+import {useBeforeUnload} from 'react-use';
+
+const Demo = () => {
+  const [dirty, toggleDirty] = useToggle(false);
+  const dirtyFn = useCallback(() => {
+    return dirty;
+  }, [dirty]);
+  useBeforeUnload(dirtyFn, 'You have unsaved changes, are you sure?');
+
+  return (
+    <div>
+      {dirty && <p>Try to reload or close tab</p>}
+      <button onClick={() => toggleDirty()}>{dirty ? 'Disable' : 'Enable'}</button>
+    </div>
+  );
+};
+```

package.json

@@ -92,9 +92,9 @@
     "babel-loader": "8.0.6",
     "babel-plugin-dynamic-import-node": "2.3.0",
     "eslint": "6.8.0",
-    "eslint-config-react-app": "5.1.0",
+    "eslint-config-react-app": "5.2.0",
     "eslint-plugin-flowtype": "4.6.0",
-    "eslint-plugin-import": "2.20.0",
+    "eslint-plugin-import": "2.20.1",
     "eslint-plugin-jsx-a11y": "6.2.3",
     "eslint-plugin-react": "7.18.0",
     "eslint-plugin-react-hooks": "2.3.0",

src/useBeforeUnload.ts

@@ -1,25 +1,34 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 
-const useBeforeUnload = (enabled: boolean = true, message?: string) => {
-  useEffect(() => {
-    if (!enabled) {
-      return;
-    }
+const useBeforeUnload = (enabled: boolean | (() => boolean) = true, message?: string) => {
+  const handler = useCallback(
+    (event: BeforeUnloadEvent) => {
+      const finalEnabled = typeof enabled === 'function' ? enabled() : true;
+
+      if (!finalEnabled) {
+        return;
+      }
 
-    const handler = (event: BeforeUnloadEvent) => {
       event.preventDefault();
 
       if (message) {
         event.returnValue = message;
       }
 
       return message;
-    };
+    },
+    [enabled, message]
+  );
+
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
 
     window.addEventListener('beforeunload', handler);
 
     return () => window.removeEventListener('beforeunload', handler);
-  }, [message, enabled]);
+  }, [enabled, handler]);
 };
 
 export default useBeforeUnload;

src/useClickAway.ts

@@ -3,9 +3,9 @@ import { off, on } from './util';
 
 const defaultEvents = ['mousedown', 'touchstart'];
 
-const useClickAway = (
+const useClickAway = <E extends Event = Event>(
   ref: RefObject<HTMLElement | null>,
-  onClickAway: (event: KeyboardEvent) => void,
+  onClickAway: (event: E) => void,
   events: string[] = defaultEvents
 ) => {
   const savedCallback = useRef(onClickAway);

stories/useBeforeUnload.story.tsx

@@ -1,9 +1,9 @@
 import { storiesOf } from '@storybook/react';
-import * as React from 'react';
+import React, { useCallback } from 'react';
 import { useBeforeUnload, useToggle } from '../src';
 import ShowDocs from './util/ShowDocs';
 
-const Demo = () => {
+const DemoBool = () => {
   const [dirty, toggleDirty] = useToggle(false);
   useBeforeUnload(dirty, 'You have unsaved changes, are you sure?');
 
@@ -15,6 +15,22 @@ const Demo = () => {
   );
 };
 
+const DemoFunc = () => {
+  const [dirty, toggleDirty] = useToggle(false);
+  const dirtyFn = useCallback(() => {
+    return dirty;
+  }, [dirty]);
+  useBeforeUnload(dirtyFn, 'You have unsaved changes, are you sure?');
+
+  return (
+    <div>
+      {dirty && <p>Try to reload or close tab</p>}
+      <button onClick={() => toggleDirty()}>{dirty ? 'Disable' : 'Enable'}</button>
+    </div>
+  );
+};
+
 storiesOf('Side effects|useBeforeUnload', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useBeforeUnload.md')} />)
-  .add('Demo', () => <Demo />);
+  .add('Demo (boolean)', () => <DemoBool />)
+  .add('Demo (function)', () => <DemoFunc />);

stories/useClickAway.story.tsx

@@ -7,7 +7,7 @@ import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
   const ref = useRef(null);
-  useClickAway(ref, action('outside clicked'));
+  useClickAway<MouseEvent>(ref, action('outside clicked'));
 
   return (
     <div

yarn.lock

@@ -6585,10 +6585,10 @@ escodegen@^1.9.1:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-react-app@5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-5.1.0.tgz#a37b3f2d4f56f856f93277281ef52bd791273e63"
-  integrity sha512-hBaxisHC6HXRVvxX+/t1n8mOdmCVIKgkXsf2WoUkJi7upHJTwYTsdCmx01QPOjKNT34QMQQ9sL0tVBlbiMFjxA==
+eslint-config-react-app@5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-5.2.0.tgz#135110ba56a9e378f7acfe5f36e2ae76a2317899"
+  integrity sha512-WrHjoGpKr1kLLiWDD81tme9jMM0hk5cMxasLSdyno6DdPt+IfLOrDJBVo6jN7tn4y1nzhs43TmUaZWO6Sf0blw==
   dependencies:
     confusing-browser-globals "^1.0.9"
 
@@ -6615,10 +6615,10 @@ [email protected]:
   dependencies:
     lodash "^4.17.15"
 
-[email protected].0:
-  version "2.20.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.20.0.tgz#d749a7263fb6c29980def8e960d380a6aa6aecaa"
-  integrity sha512-NK42oA0mUc8Ngn4kONOPsPB1XhbUvNHqF+g307dPV28aknPoiNnKLFd9em4nkswwepdF5ouieqv5Th/63U7YJQ==
+[email protected].1:
+  version "2.20.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.20.1.tgz#802423196dcb11d9ce8435a5fc02a6d3b46939b3"
+  integrity sha512-qQHgFOTjguR+LnYRoToeZWT62XM55MBVXObHM6SKFd1VzDcX/vqT1kAz8ssqigh5eMj8qXcRoXXGZpPP6RfdCw==
   dependencies:
     array-includes "^3.0.3"
     array.prototype.flat "^1.2.1"