Merge pull request #72 from streamich/useRefMounted

Use ref mounted

README.md

@@ -73,6 +73,7 @@
     <br/>
 - [**Lifecycles**](./docs/Lifecycles.md)
   - [`useLifecycles`](./docs/useLifecycles.md) &mdash; calls `mount` and `unmount` callbacks.
+  - [`useRefMounted`](./docs/useRefMounted.md) &mdash; tracks if component is mounted.
   - [`useLogger`](./docs/useLogger.md) &mdash; logs in console as component goes though life-cycles.
   - [`useMount`](./docs/useMount.md) &mdash; calls `mount` callbacks.
   - [`useUnmount`](./docs/useUnmount.md) &mdash; calls `unmount` callbacks.

docs/useRefMounted.md

@@ -0,0 +1,25 @@
+# `useRefMounted`
+
+Lifecycle hook that tracks if component is mounted. Returns a ref, which has a
+boolean `.current` property.
+
+
+## Usage
+
+```jsx
+import {useRefMounted} from 'react-use';
+
+const Demo = () => {
+  const refMounted = useRefMounted();
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (refMounted.currrent) {
+        // ...
+      } else {
+        // ...
+      }
+    }, 1000);
+  });
+};
+```

package.json

@@ -30,8 +30,7 @@
   },
   "homepage": "https://github.com/streamich/react-use#readme",
   "dependencies": {
-    "@types/react": "^16.4.18",
-    "@types/react-dom": "^16.0.9",
+    "@types/react": "^16.7.13",
     "throttle-debounce": "^2.0.1",
     "nano-css": "^3.4.0",
     "rebound": "^0.1.0",
@@ -42,8 +41,8 @@
   },
   "devDependencies": {
     "@storybook/react": "^3.4.11",
-    "react": "16.7.0-alpha.0",
-    "react-dom": "16.7.0-alpha.0",
+    "react": "next",
+    "react-dom": "next",
     "typescript": "^3.1.3",
     "ts-node": "^7.0.1",
     "ts-loader": "3",

src/__stories__/useRefMounted.story.tsx

@@ -0,0 +1,20 @@
+import {storiesOf} from '@storybook/react';
+import * as React from 'react';
+import {useRefMounted, useRaf} from '..';
+import ShowDocs from '../util/ShowDocs';
+
+const Demo = () => {
+  const refMounted = useRefMounted();
+  useRaf();
+  return (
+    <div>
+      is mounted: {refMounted.current ? '👍' : '👎'}
+    </div>
+  );
+};
+
+storiesOf('useRefMounted', module)
+  .add('Docs', () => <ShowDocs md={require('../../docs/useRefMounted.md')} />)
+  .add('Demo', () =>
+    <Demo/>
+  )

src/createRouter.ts

@@ -13,14 +13,14 @@ const createRouter = () => {
 
   const Router: React.SFC<RouterProviderProps> = (props) => {
     const {route, fullRoute, parent, children} = props;
-  
+
     if (process.env.NODE_ENV !== 'production') {
       if (typeof route !== 'string') {
         throw new TypeError('Router route must be a string.');
       }
     }
-  
-    return React.createElement(context.Provider, {
+
+    return React.createElement(context.Provider as any, {
       value: {
         fullRoute: fullRoute || route,
         route,

src/index.ts

@@ -30,6 +30,7 @@ import useObservable from './useObservable';
 import useOrientation from './useOrientation';
 import useOutsideClick from './useOutsideClick';
 import useRaf from './useRaf';
+import useRefMounted from './useRefMounted';
 import useRenderProp from './useRenderProp';
 import useSessionStorage from './useSessionStorage';
 import useSetState from './useSetState';
@@ -79,6 +80,7 @@ export {
   useOrientation,
   useOutsideClick,
   useRaf,
+  useRefMounted,
   useRenderProp,
   useSessionStorage,
   useSetState,

src/useRefMounted.ts

@@ -0,0 +1,12 @@
+import {useRef, useEffect} from 'react';
+
+const useRefMounted = () => {
+  const refMounted = useRef(false);
+  useEffect(() => {
+    refMounted.current = true;
+    return () => refMounted.current = false;
+  });
+  return refMounted;
+};
+
+export default useRefMounted;

yarn.lock

@@ -369,18 +369,10 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.6.tgz#9c03d3fed70a8d517c191b7734da2879b50ca26c"
   integrity sha512-ZBFR7TROLVzCkswA3Fmqq+IIJt62/T7aY/Dmz+QkU7CaW2QFqAitCE8Ups7IzmGhcN1YWMBT4Qcoc07jU9hOJQ==
 
-"@types/react-dom@^16.0.9":
-  version "16.0.9"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.9.tgz#73ceb7abe6703822eab6600e65c5c52efd07fb91"
-  integrity sha512-4Z0bW+75zeQgsEg7RaNuS1k9MKhci7oQqZXxrV5KUGIyXZHHAAL3KA4rjhdH8o6foZ5xsRMSqkoM5A3yRVPR5w==
-  dependencies:
-    "@types/node" "*"
-    "@types/react" "*"
-
-"@types/react@*", "@types/react@^16.4.18":
-  version "16.4.18"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.4.18.tgz#2e28a2e7f92d3fa7d6a65f2b73275c3e3138a13d"
-  integrity sha512-eFzJKEg6pdeaukVLVZ8Xb79CTl/ysX+ExmOfAAqcFlCCK5TgFDD9kWR0S18sglQ3EmM8U+80enjUqbfnUyqpdA==
+"@types/react@^16.7.13":
+  version "16.7.13"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.7.13.tgz#d2369ae78377356d42fb54275d30218e84f2247a"
+  integrity sha512-WhqrQLAE9z65hfcvWqZfR6qUtIazFRyb8LXqHo8440R53dAQqNkt2OlVJ3FXwqOwAXXg4nfYxt0qgBvE18o5XA==
   dependencies:
     "@types/prop-types" "*"
     csstype "^2.2.0"
@@ -7834,15 +7826,15 @@ react-docgen@^3.0.0-beta11:
     node-dir "^0.1.10"
     recast "^0.15.0"
 
-react-dom@16.7.0-alpha.0:
-  version "16.7.0-alpha.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.7.0-alpha.0.tgz#8379158d4c76d63c989f325f45dfa5762582584f"
-  integrity sha512-/XUn1ldxmoV2B7ov0rWT5LMZaaHMlF9GGLkUsmPRxmWTJwRDOuAPXidSaSlmR/VOhDSI1s+v3+KzFqhhDFJxYA==
+react-dom@next:
+  version "16.7.0-alpha.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.7.0-alpha.2.tgz#16632880ed43676315991d8b412cce6975a30282"
+  integrity sha512-o0mMw8jBlwHjGZEy/vvKd/6giAX0+skREMOTs3/QHmgi+yAhUClp4My4Z9lsKy3SXV+03uPdm1l/QM7NTcGuMw==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.11.0-alpha.0"
+    scheduler "^0.12.0-alpha.2"
 
 react-error-overlay@^4.0.1:
   version "4.0.1"
@@ -7964,15 +7956,20 @@ react-treebeard@^2.1.0:
     shallowequal "^0.2.2"
     velocity-react "^1.3.1"
 
-react@16.7.0-alpha.0:
-  version "16.7.0-alpha.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.7.0-alpha.0.tgz#e2ed4abe6f268c9b092a1d1e572953684d1783a9"
-  integrity sha512-V0za4H01aoAF0SdzahHepvfvzTQ1xxkgMX4z8uKzn+wzZAlVk0IVpleqyxZWluqmdftNedj6fIIZRO/rVYVFvQ==
+react-wait@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/react-wait/-/react-wait-0.3.0.tgz#0cdd4d919012451a5bc3ab0a16d00c6fd9a8c10b"
+  integrity sha512-kB5x/kMKWcn0uVr9gBdNz21/oGbQwEQnF3P9p6E9yLfJ9DRcKS0fagbgYMFI0YFOoyKDj+2q6Rwax0kTYJF37g==
+
+react@next:
+  version "16.7.0-alpha.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.7.0-alpha.2.tgz#924f2ae843a46ea82d104a8def7a599fbf2c78ce"
+  integrity sha512-Xh1CC8KkqIojhC+LFXd21jxlVtzoVYdGnQAi/I2+dxbmos9ghbx5TQf9/nDxc4WxaFfUQJkya0w1k6rMeyIaxQ==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.11.0-alpha.0"
+    scheduler "^0.12.0-alpha.2"
 
 read-cmd-shim@^1.0.1, read-cmd-shim@~1.0.1:
   version "1.0.1"
@@ -8543,10 +8540,10 @@ scheduler@^0.10.0:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-scheduler@^0.11.0-alpha.0:
-  version "0.11.0-alpha.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.11.0-alpha.0.tgz#7b132c726608993471db07866f2d59a52b9e190b"
-  integrity sha512-0tUDHYSyni/EHkMMBysVXVwfanCWWbLsulnDB1tGrQiWWrVuRVoclWCPHCYC/1iR5Rj34EQhxh3/F36V+F+ZpA==
+scheduler@^0.12.0-alpha.2:
+  version "0.12.0-alpha.3"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.12.0-alpha.3.tgz#59afcaba1cb79e3e8bee91de94eb8f42c9152c2b"
+  integrity sha512-KADuBlOWSrT/DCt/oA+NgsNamRCsfz7wj+leaeGjGHipNClsqhjOPogKkJgem6WLAv/QzxW8bE7zlGc9OxiYSQ==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"