feat: 🎸 add usePageLeave hook

README.md

@@ -45,6 +45,7 @@
   - [`useMouse` and `useMouseHovered`](./docs/useMouse.md) — tracks state of mouse position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemouse--docs)
   - [`useNetwork`](./docs/useNetwork.md) — tracks state of user's internet connection.
   - [`useOrientation`](./docs/useOrientation.md) — tracks state of device's screen orientation.
+  - [`usePageLeave`](./docs/usePageLeave.md) — triggers when mouse leaves page boundaries.
   - [`useScroll`](./docs/useScroll.md) — tracks some HTML element's scroll position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usescroll--docs)
   - [`useSize`](./docs/useSize.md) — tracks some HTML element's dimensions.
   - [`useWindowScroll`](./docs/useWindowScroll.md) — tracks `Window` scroll position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usewindowscroll--docs)

docs/usePageLeave.md

@@ -0,0 +1,15 @@
+# `usePageLeave`
+
+React sensor hook that fires a callback when mouse leaves the page.
+
+## Usage
+
+```jsx
+import {usePageLeave} from 'react-use';
+
+const Demo = () => {
+  usePageLeave(() => console.log('Page left...'));
+
+  return null;
+};
+```

src/__stories__/usePageLeave.story.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {usePageLeave} from '..';
+
+const Demo = () => {
+  usePageLeave(action('onPageLeave'));
+
+  return (
+    <div>
+      Try leaving the page and see logs in <code>Actions</code> tab.
+    </div>
+  );
+};
+
+storiesOf('Sensors|usePageLeave', module).add('Default', () => <Demo />);

src/index.ts

@@ -34,6 +34,7 @@ import useNumber from './useNumber';
 import useObservable from './useObservable';
 import useOrientation from './useOrientation';
 import useClickAway from './useClickAway';
+import usePageLeave from './usePageLeave';
 import usePromise from './usePromise';
 import useRaf from './useRaf';
 import useRefMounted from './useRefMounted';
@@ -93,6 +94,7 @@ export {
   useNumber,
   useObservable,
   useOrientation,
+  usePageLeave,
   usePromise,
   useRaf,
   useRefMounted,

src/usePageLeave.ts

@@ -0,0 +1,20 @@
+import {useEffect} from 'react';
+
+const usePageLeave = (onPageLeave, args = []) => {
+  useEffect(() => {
+    if (onPageLeave) {
+      const handler = (event) => {
+        event = event ? event : (window.event as any);
+        const from = event.relatedTarget || event.toElement;
+        if (!from || (from as any).nodeName === 'HTML') onPageLeave();
+      };
+
+      document.addEventListener('mouseout', handler);
+      return () => {
+        document.removeEventListener('mouseout', handler);
+      };
+    }
+  }, args);
+};
+
+export default usePageLeave;