chore: 🤖 add component useInterval to README, improve demo

README.md

@@ -78,6 +78,7 @@
     <br/>
 - [**Animations**](./docs/Animations.md)
   - [`useRaf`](./docs/useRaf.md) &mdash; re-renders component on each `requestAnimationFrame`.
+  - [`useInterval`](./docs/useInterval.md) &mdash; re-renders component on a set interval using `setInterval`.
   - [`useSpring`](./docs/useSpring.md) &mdash; interpolates number over time according to spring dynamics.
   - [`useTimeout`](./docs/useTimeout.md) &mdash; returns true after a timeout.
   - [`useTween`](./docs/useTween.md) &mdash; re-renders component, while tweening a number from 0 to 1. [![][img-demo]](https://codesandbox.io/s/52990wwzyl)

docs/useInterval.md

@@ -1,12 +1,12 @@
 # `useInterval`
 
-React hook that allow you using declarative setInterval.
+React hook that allow you using declarative `setInterval`.
 
 ## Usage
 
 ```jsx
 import * as React from 'react';
-import { useInterval } from 'react-use';
+import useInterval from 'react-use/lib/useInterval';
 
 const Demo = () => {
   const [count, setCount] = React.useState(0);
@@ -23,11 +23,11 @@ const Demo = () => {
   return (
     <div>
       <div>
-        delay: <input type="text" value={delay} onChange={handleDelayChange} />
+        delay: <input value={delay} onChange={handleDelayChange} />
       </div>
       <h1>count: {count}</h1>
       <div>
-        <button onClick={() => setDelay(null)}>stop</button>
+        <button onClick={() => setDelay(delay ? null : 1000)}>{delay ? 'stop' : 'start'}</button>
       </div>
     </div>
   );

src/__stories__/useInterval.story.tsx

@@ -22,7 +22,7 @@ const Demo = () => {
       </div>
       <h1>count: {count}</h1>
       <div>
-        <button onClick={() => setDelay(null)}>stop</button>
+        <button onClick={() => setDelay(delay ? null : 1000)}>{delay ? 'stop' : 'start'}</button>
       </div>
     </div>
   );

src/useDebounce.ts

@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import { useUpdateEffect } from '..';
 
 const useDebounce = (fn: () => any, ms: number = 0, args: any[] = []) => {

src/useInterval.ts

@@ -12,6 +12,7 @@ const useInterval = (callback: Function, delay?: number | null) => {
       const interval = setInterval(() => latestCallback.current(), delay || 0);
       return () => clearInterval(interval);
     }
+    return undefined;
   }, [delay]);
 };
 

tslint.json

@@ -30,7 +30,8 @@
         "printWidth": 120,
         "tabWidth": 2
       }
-    ]
+    ],
+    "ordered-imports": false
   },
   "rulesDirectory": ["tslint-plugin-prettier"]
 }