feat: 🎸 add useTimeout hook

README.md

@@ -16,7 +16,7 @@
     <br />
     Collection of essential <a href="https://reactjs.org/docs/hooks-intro.html">React Hooks</a>.</em>
     <br />
-    <em>This is mostly port of <a href="https://github.com/streamich/libreact"><code>libreact</code></a> to React Hooks.</em>
+    <em>This is mostly port of</em> <a href="https://github.com/streamich/libreact"><code>libreact</code></a> <em>to React Hooks.</em>
   </sup>
   <br />
   <br />
@@ -46,7 +46,8 @@
      <br/>
      <br/>
 - [__Animations__](./docs/Animations.md)
-   - [`useSpring`](./docs/useSpring.md) &mdash; updates number value over time according to spring dynamics.
+   - [`useSpring`](./docs/useSpring.md) &mdash; interpolates number over time according to spring dynamics.
+   - [`useTimeout`](./docs/useTimeout.md) &mdash; returns true after a timeout.
      <br/>
      <br/>
 - [__Side-effects__](./docs/Side-effects.md)

docs/useTimeout.md

@@ -0,0 +1,20 @@
+# `useTimeout`
+
+Returns `true` after a specified number of milliseconds.
+
+
+## Usage
+
+```jsx
+import {useTimeouta} from 'react-use';
+
+const Demo = () => {
+  const ready = useTimeout(2000);
+
+  return (
+    <div>
+      Ready: {ready ? 'Yes' : 'No'}
+    </div>
+  );
+};
+```

src/__stories__/useTimeout.story.tsx

@@ -0,0 +1,18 @@
+import {storiesOf} from '@storybook/react';
+import * as React from 'react';
+import {useTimeout} from '..';
+
+const Demo = () => {
+  const ready = useTimeout(2e3);
+
+  return (
+    <div>
+      Ready: {ready ? 'Yes' : 'No'}
+    </div>
+  );
+};
+
+storiesOf('useTimeout', module)
+  .add('Example', () =>
+    <Demo/>
+  )

src/index.ts

@@ -15,6 +15,7 @@ import useNetwork from './useNetwork';
 import useOrientation from './useOrientation';
 import useSize from './useSize';
 import useSpring from './useSpring';
+import useTimeout from './useTimeout';
 import useTitle from './useTitle';
 import useToggle from './useToggle';
 import useWindowSize from './useWindowSize';
@@ -37,6 +38,7 @@ export {
   useOrientation,
   useSize,
   useSpring,
+  useTimeout,
   useTitle,
   useToggle,
   useWindowSize,

src/useTimeout.ts

@@ -0,0 +1,19 @@
+import {useState, useEffect} from './react';
+
+const useTimeout = (ms: number = 0) => {
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    let timer = setTimeout(() => {
+      setReady(true);
+    }, ms);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  });
+
+  return ready;
+};
+
+export default useTimeout;