From f1c0987f87a8e71d06fcc477929055a2b0f894e2 Mon Sep 17 00:00:00 2001
From: Ward Oosterlijnck <wardoosterlijnck@gmail.com>
Date: Tue, 16 Jul 2019 19:47:50 +1000
Subject: [PATCH] Example with dependency with a delay value slider

---
 src/__stories__/useAsync.story.tsx | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/__stories__/useAsync.story.tsx b/src/__stories__/useAsync.story.tsx
index 942005d9..2bc503f4 100644
--- a/src/__stories__/useAsync.story.tsx
+++ b/src/__stories__/useAsync.story.tsx
@@ -1,17 +1,17 @@
+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>
@@ -19,5 +19,9 @@ const Demo = () => {
 };
 
 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} />;
+  });