docs: improve useAsync demo and docs

docs/useAsync.md

@@ -3,21 +3,16 @@
 React hook that resolves an `async` function or a function that returns
 a promise;
 
-
 ## Usage
 
 ```jsx
 import {useAsync} from 'react-use';
 
-// Returns a Promise that resolves after one second.
-const fn = () => new Promise((resolve) => {
-  setTimeout(() => {
-    resolve('RESOLVED');
-  }, 1000);
-});
-
-const Demo = () => {
-  const state = useAsync(fn);
+const Demo = ({delay = 1000}) => {
+  const state = useAsync(() => {
+    // Returns a Promise that resolves after x milliseconds
+    return new Promise((resolve) => setTimeout(() => resolve('RESOLVED'), delay);
+  }, [delay]);
 
   return (
     <div>
@@ -32,7 +27,6 @@ const Demo = () => {
 };
 ```
 
-
 ## Reference
 
 ```ts

src/__stories__/useAsync.story.tsx

@@ -1,23 +1,27 @@
+import { number, withKnobs } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import { useAsync } from '..';
 import ShowDocs from './util/ShowDocs';
 
-const fn = () =>
-  new Promise<string>(resolve => {
-    setTimeout(() => {
-      resolve('RESOLVED');
-    }, 1000);
-  });
-
-const Demo = () => {
-  const { loading, error, value } = useAsync<string>(fn);
+const Demo = ({ delay }) => {
+  const { loading, error, value } = useAsync<string>(
+    () =>
+      new Promise<string>(resolve => {
+        setTimeout(() => resolve('RESOLVED'), delay);
+      }),
+    [delay]
+  );
 
   return (
     <div>{loading ? <div>Loading...</div> : error ? <div>Error: {error.message}</div> : <div>Value: {value}</div>}</div>
   );
 };
 
 storiesOf('Side effects|useAsync', module)
+  .addDecorator(withKnobs)
   .add('Docs', () => <ShowDocs md={require('../../docs/useAsync.md')} />)
-  .add('Demo', () => <Demo />);
+  .add('Demo', () => {
+    const delay = number('delay', 1000, { range: true, min: 100, max: 5000, step: 100 });
+    return <Demo delay={delay} />;
+  });