From 5728cc958cde9c82f7e41d783cbf51383950fffe Mon Sep 17 00:00:00 2001
From: streamich <streamich@gmail.com>
Date: Sun, 28 Oct 2018 15:11:43 +0100
Subject: [PATCH] =?UTF-8?q?docs:=20=E2=9C=8F=EF=B8=8F=20add=20docs=20to=20?=
 =?UTF-8?q?Storybook=20demos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/useAudio.md                          |   2 -
 docs/useBattery.md                        |   2 -
 docs/useList.md                           |   2 +-
 docs/useWindowSize.md                     |   2 -
 package.json                              |   5 +-
 src/__stories__/useAsync.story.tsx        |   4 +-
 src/__stories__/useAudio.story.tsx        |   4 +-
 src/__stories__/useBattery.story.tsx      |   4 +-
 src/__stories__/useCounter.story.tsx      |   4 +-
 src/__stories__/useCss.story.tsx          |   4 +-
 src/__stories__/useFavicon.story.tsx      |   4 +-
 src/__stories__/useGeolocation.story.tsx  |   4 +-
 src/__stories__/useHover.story.tsx        |   4 +-
 src/__stories__/useIdle.story.tsx         |   4 +-
 src/__stories__/useLifecycles.story.tsx   |   4 +-
 src/__stories__/useList.story.tsx         |   6 +-
 src/__stories__/useLocalStorage.story.tsx |  10 ++-
 src/__stories__/useLocation.story.tsx     |   4 +-
 src/__stories__/useLogger.story.tsx       |   4 +-
 src/__stories__/useMap.story.tsx          |   4 +-
 src/__stories__/useMedia.story.tsx        |   4 +-
 src/__stories__/useMediaDevices.story.tsx |   4 +-
 src/__stories__/useMotion.story.tsx       |   4 +-
 src/__stories__/useMount.story.tsx        |   4 +-
 src/__stories__/useNetwork.story.tsx      |   4 +-
 src/__stories__/useOrientation.story.tsx  |   4 +-
 src/__stories__/useRaf.story.tsx          |   4 +-
 src/__stories__/useSetState.story.tsx     |   4 +-
 src/__stories__/useSize.story.tsx         |   1 +
 src/__stories__/useSpeech.story.tsx       |   4 +-
 src/__stories__/useSpring.story.tsx       |   4 +-
 src/__stories__/useTimeout.story.tsx      |   4 +-
 src/__stories__/useTitle.story.tsx        |   4 +-
 src/__stories__/useToggle.story.tsx       |   4 +-
 src/__stories__/useTween.story.tsx        |   4 +-
 src/__stories__/useUnmount.story.tsx      |   5 +-
 src/__stories__/useWindowSize.story.tsx   |   4 +-
 src/util/ShowDocs.tsx                     | 102 ++++++++++++++++++++++
 38 files changed, 205 insertions(+), 44 deletions(-)
 create mode 100644 src/util/ShowDocs.tsx

diff --git a/docs/useAudio.md b/docs/useAudio.md
index f2e7e4ff..206681a7 100644
--- a/docs/useAudio.md
+++ b/docs/useAudio.md
@@ -2,8 +2,6 @@
 
 Creates `<audio>` element, tracks its state and exposes playback conrols.
 
-[![](https://img.shields.io/badge/demo-useAudio-green.svg)](https://codesandbox.io/s/5v7q47knwl)
-
 
 ## Usage
 
diff --git a/docs/useBattery.md b/docs/useBattery.md
index 98830c0c..71753778 100644
--- a/docs/useBattery.md
+++ b/docs/useBattery.md
@@ -2,8 +2,6 @@
 
 React sensor hook that tracks batter status.
 
-[![](https://img.shields.io/badge/demo-useBattery-green.svg)](https://codesandbox.io/s/qlvn662zww)
-
 
 ## Usage
 
diff --git a/docs/useList.md b/docs/useList.md
index 79657992..48b2c9a0 100644
--- a/docs/useList.md
+++ b/docs/useList.md
@@ -14,7 +14,7 @@ const Demo = () => {
   return (
     <div>
       <div>{list.join(',')}</div>
-      <button onClick={() => set([])}>Rest</button>
+      <button onClick={() => set([])}>Reset</button>
       <button onClick={() => push(Date.now())}>Push</button>
     </div>
   );
diff --git a/docs/useWindowSize.md b/docs/useWindowSize.md
index 42cc29d7..e84501cf 100644
--- a/docs/useWindowSize.md
+++ b/docs/useWindowSize.md
@@ -2,8 +2,6 @@
 
 React sensor hook that tracks dimensions of the browser window.
 
-[![](https://img.shields.io/badge/demo-useWindowSize-green.svg)](https://codesandbox.io/s/m7ln22668)
-
 
 ## Usage
 
diff --git a/package.json b/package.json
index 8196ad1e..75a97cbb 100644
--- a/package.json
+++ b/package.json
@@ -12,10 +12,11 @@
     "start": "yarn storybook",
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "tsc",
-    "clean": "rimraf lib",
+    "clean": "rimraf lib storybook-static",
     "storybook": "start-storybook -p 6008",
     "storybook:build": "build-storybook",
-    "storybook:upload": "gh-pages -d storybook-static"
+    "storybook:upload": "gh-pages -d storybook-static",
+    "storybook:clean": "rimraf storybook-static"
   },
   "author": "@streamich",
   "license": "Unlicense",
diff --git a/src/__stories__/useAsync.story.tsx b/src/__stories__/useAsync.story.tsx
index 95ed063b..8fe24b3d 100644
--- a/src/__stories__/useAsync.story.tsx
+++ b/src/__stories__/useAsync.story.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {useAsync} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const fn = () => new Promise((resolve) => {
   setTimeout(() => {
@@ -22,6 +23,7 @@ const Demo = () => {
 };
 
 storiesOf('useAsync', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useAsync.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
diff --git a/src/__stories__/useAudio.story.tsx b/src/__stories__/useAudio.story.tsx
index 3ab58630..f5e02d1f 100644
--- a/src/__stories__/useAudio.story.tsx
+++ b/src/__stories__/useAudio.story.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {useAudio} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const [audio, state, controls, ref] = useAudio({
@@ -29,6 +30,7 @@ const Demo = () => {
 };
 
 storiesOf('useAudio', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useAudio.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
diff --git a/src/__stories__/useBattery.story.tsx b/src/__stories__/useBattery.story.tsx
index c2115b3f..e70192e5 100644
--- a/src/__stories__/useBattery.story.tsx
+++ b/src/__stories__/useBattery.story.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {useBattery} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const state = useBattery();
@@ -13,6 +14,7 @@ const Demo = () => {
 };
 
 storiesOf('useBattery', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useBattery.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
diff --git a/src/__stories__/useCounter.story.tsx b/src/__stories__/useCounter.story.tsx
index ae24a190..1c842e10 100644
--- a/src/__stories__/useCounter.story.tsx
+++ b/src/__stories__/useCounter.story.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {useCounter} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const [value, inc, set] = useCounter();
@@ -15,6 +16,7 @@ const Demo = () => {
 };
 
 storiesOf('useCounter', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useCounter.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
diff --git a/src/__stories__/useCss.story.tsx b/src/__stories__/useCss.story.tsx
index 5734cf7d..f39d76ed 100644
--- a/src/__stories__/useCss.story.tsx
+++ b/src/__stories__/useCss.story.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {useCss} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const className = useCss({
@@ -19,6 +20,7 @@ const Demo = () => {
 };
 
 storiesOf('useCss', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useCss.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
diff --git a/src/__stories__/useFavicon.story.tsx b/src/__stories__/useFavicon.story.tsx
index ec2d9095..dc682b39 100644
--- a/src/__stories__/useFavicon.story.tsx
+++ b/src/__stories__/useFavicon.story.tsx
@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useFavicon} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   useFavicon('https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico');
@@ -9,6 +10,7 @@ const Demo = () => {
 };
 
 storiesOf('useFavicon', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useFavicon.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
diff --git a/src/__stories__/useGeolocation.story.tsx b/src/__stories__/useGeolocation.story.tsx
index 1dfca6d6..41046afd 100644
--- a/src/__stories__/useGeolocation.story.tsx
+++ b/src/__stories__/useGeolocation.story.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {useGeolocation} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const state = useGeolocation();
@@ -13,6 +14,7 @@ const Demo = () => {
 };
 
 storiesOf('useGeolocation', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useGeolocation.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
diff --git a/src/__stories__/useHover.story.tsx b/src/__stories__/useHover.story.tsx
index 02aa917e..f7f998e7 100644
--- a/src/__stories__/useHover.story.tsx
+++ b/src/__stories__/useHover.story.tsx
@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useHover} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const element = (hovered: boolean) =>
@@ -18,6 +19,7 @@ const Demo = () => {
 };
 
 storiesOf('useHover', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useHover.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
diff --git a/src/__stories__/useIdle.story.tsx b/src/__stories__/useIdle.story.tsx
index ff9551a1..4f80fc1e 100644
--- a/src/__stories__/useIdle.story.tsx
+++ b/src/__stories__/useIdle.story.tsx
@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useIdle} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const isIdle = useIdle(3e3);
@@ -13,6 +14,7 @@ const Demo = () => {
 };
 
 storiesOf('useIdle', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useIdle.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
diff --git a/src/__stories__/useLifecycles.story.tsx b/src/__stories__/useLifecycles.story.tsx
index 5ffac64c..28e7750a 100644
--- a/src/__stories__/useLifecycles.story.tsx
+++ b/src/__stories__/useLifecycles.story.tsx
@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useLifecycles} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   useLifecycles(() => console.log('MOUNTED'), () => console.log('UNMOUNTED'));
@@ -8,6 +9,7 @@ const Demo = () => {
 };
 
 storiesOf('useLifecycles', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useLifecycles.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
diff --git a/src/__stories__/useList.story.tsx b/src/__stories__/useList.story.tsx
index a573d666..2c2b3642 100644
--- a/src/__stories__/useList.story.tsx
+++ b/src/__stories__/useList.story.tsx
@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useList} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const [list, {set, push}] = useList();
@@ -8,13 +9,14 @@ const Demo = () => {
   return (
     <div>
       <div>{list.join(',')}</div>
-      <button onClick={() => set([])}>Rest</button>
+      <button onClick={() => set([])}>Reset</button>
       <button onClick={() => push(Date.now())}>Push</button>
     </div>
   );
 };
 
 storiesOf('useList', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useList.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
diff --git a/src/__stories__/useLocalStorage.story.tsx b/src/__stories__/useLocalStorage.story.tsx
index 33fbe9b9..b328f361 100644
--- a/src/__stories__/useLocalStorage.story.tsx
+++ b/src/__stories__/useLocalStorage.story.tsx
@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useLocalStorage} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const value = useLocalStorage('key');
@@ -13,7 +14,8 @@ const Demo = () => {
   );
 };
 
-storiesOf('useLocalStorage', module)
-  .add('Example', () =>
-    <Demo/>
-  )
+// storiesOf('useLocalStorage', module)
+  // .add('Docs', () => <ShowDocs md={require('../../docs/useLocalStorage.md')} />)
+  // .add('Demo', () =>
+    // <Demo/>
+  // )
diff --git a/src/__stories__/useLocation.story.tsx b/src/__stories__/useLocation.story.tsx
index 859824d9..a20b6bd8 100644
--- a/src/__stories__/useLocation.story.tsx
+++ b/src/__stories__/useLocation.story.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {useLocation} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const state = useLocation();
@@ -13,6 +14,7 @@ const Demo = () => {
 };
 
 storiesOf('useLocation', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useLocation.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
diff --git a/src/__stories__/useLogger.story.tsx b/src/__stories__/useLogger.story.tsx
index 5d719c06..28c44c62 100644
--- a/src/__stories__/useLogger.story.tsx
+++ b/src/__stories__/useLogger.story.tsx
@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useLogger} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = (props) => {
   useLogger('Demo', props);
@@ -8,6 +9,7 @@ const Demo = (props) => {
 };
 
 storiesOf('useLogger', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useLogger.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
diff --git a/src/__stories__/useMap.story.tsx b/src/__stories__/useMap.story.tsx
index 285542cd..c2f05bba 100644
--- a/src/__stories__/useMap.story.tsx
+++ b/src/__stories__/useMap.story.tsx
@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useMap} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const [map, {set, reset}] = useMap({
@@ -17,6 +18,7 @@ const Demo = () => {
 };
 
 storiesOf('useMap', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useMap.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
diff --git a/src/__stories__/useMedia.story.tsx b/src/__stories__/useMedia.story.tsx
index 8d31f8e3..66002bca 100644
--- a/src/__stories__/useMedia.story.tsx
+++ b/src/__stories__/useMedia.story.tsx
@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useMedia} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const isWide = useMedia('(min-width: 480px)');
@@ -13,6 +14,7 @@ const Demo = () => {
 };
 
 storiesOf('useMedia', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useMedia.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
diff --git a/src/__stories__/useMediaDevices.story.tsx b/src/__stories__/useMediaDevices.story.tsx
index a64a23b0..ee4ee593 100644
--- a/src/__stories__/useMediaDevices.story.tsx
+++ b/src/__stories__/useMediaDevices.story.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {useMediaDevices} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const state = useMediaDevices();
@@ -13,6 +14,7 @@ const Demo = () => {
 };
 
 storiesOf('useMediaDevices', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useMediaDevices.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
diff --git a/src/__stories__/useMotion.story.tsx b/src/__stories__/useMotion.story.tsx
index 8f1f1765..9cc5ff69 100644
--- a/src/__stories__/useMotion.story.tsx
+++ b/src/__stories__/useMotion.story.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {useMotion} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const state = useMotion();
@@ -13,6 +14,7 @@ const Demo = () => {
 };
 
 storiesOf('useMotion', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useMotion.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
diff --git a/src/__stories__/useMount.story.tsx b/src/__stories__/useMount.story.tsx
index f653af56..cf9c90f4 100644
--- a/src/__stories__/useMount.story.tsx
+++ b/src/__stories__/useMount.story.tsx
@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useMount} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   useMount(() => console.log('MOUNTED'));
@@ -8,6 +9,7 @@ const Demo = () => {
 };
 
 storiesOf('useMount', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useMount.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
diff --git a/src/__stories__/useNetwork.story.tsx b/src/__stories__/useNetwork.story.tsx
index cc1599a9..835ca179 100644
--- a/src/__stories__/useNetwork.story.tsx
+++ b/src/__stories__/useNetwork.story.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {useNetwork} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const state = useNetwork();
@@ -13,6 +14,7 @@ const Demo = () => {
 };
 
 storiesOf('useNetwork', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useNetwork.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
diff --git a/src/__stories__/useOrientation.story.tsx b/src/__stories__/useOrientation.story.tsx
index 36e796b4..8c13e645 100644
--- a/src/__stories__/useOrientation.story.tsx
+++ b/src/__stories__/useOrientation.story.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {useOrientation} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const state = useOrientation();
@@ -13,6 +14,7 @@ const Demo = () => {
 };
 
 storiesOf('useOrientation', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useOrientation.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
diff --git a/src/__stories__/useRaf.story.tsx b/src/__stories__/useRaf.story.tsx
index 986ea848..21e8cf47 100644
--- a/src/__stories__/useRaf.story.tsx
+++ b/src/__stories__/useRaf.story.tsx
@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useRaf} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const frames = useRaf(5000, 1000);
@@ -13,6 +14,7 @@ const Demo = () => {
 };
 
 storiesOf('useRaf', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useRaf.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
diff --git a/src/__stories__/useSetState.story.tsx b/src/__stories__/useSetState.story.tsx
index 33338662..f58fcbb7 100644
--- a/src/__stories__/useSetState.story.tsx
+++ b/src/__stories__/useSetState.story.tsx
@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useSetState} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const [state, setState] = useSetState({});
@@ -15,6 +16,7 @@ const Demo = () => {
 };
 
 storiesOf('useSetState', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useSetState.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
diff --git a/src/__stories__/useSize.story.tsx b/src/__stories__/useSize.story.tsx
index 9b4779be..efb6e3eb 100644
--- a/src/__stories__/useSize.story.tsx
+++ b/src/__stories__/useSize.story.tsx
@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useSize} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const [sized, {width, height}] = useSize(
diff --git a/src/__stories__/useSpeech.story.tsx b/src/__stories__/useSpeech.story.tsx
index c507d214..b79c1ace 100644
--- a/src/__stories__/useSpeech.story.tsx
+++ b/src/__stories__/useSpeech.story.tsx
@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useSpeech} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const state = useSpeech('Hello world!');
@@ -13,6 +14,7 @@ const Demo = () => {
 };
 
 storiesOf('useSpeech', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useSpeech.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
diff --git a/src/__stories__/useSpring.story.tsx b/src/__stories__/useSpring.story.tsx
index f49b0023..c450de85 100644
--- a/src/__stories__/useSpring.story.tsx
+++ b/src/__stories__/useSpring.story.tsx
@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useSpring} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const [target, setTarget] = (React as any).useState(50);
@@ -17,6 +18,7 @@ const Demo = () => {
 };
 
 storiesOf('useSpring', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useSpring.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
diff --git a/src/__stories__/useTimeout.story.tsx b/src/__stories__/useTimeout.story.tsx
index e6b0c506..8dbc6e6a 100644
--- a/src/__stories__/useTimeout.story.tsx
+++ b/src/__stories__/useTimeout.story.tsx
@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useTimeout} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const ready = useTimeout(2e3);
@@ -13,6 +14,7 @@ const Demo = () => {
 };
 
 storiesOf('useTimeout', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useTimeout.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
diff --git a/src/__stories__/useTitle.story.tsx b/src/__stories__/useTitle.story.tsx
index 165f95c6..f5ad8f3e 100644
--- a/src/__stories__/useTitle.story.tsx
+++ b/src/__stories__/useTitle.story.tsx
@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useTitle} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   useTitle('Hello world!');
@@ -9,6 +10,7 @@ const Demo = () => {
 };
 
 storiesOf('useTitle', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useTitle.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
diff --git a/src/__stories__/useToggle.story.tsx b/src/__stories__/useToggle.story.tsx
index 0ddec2a8..2f864ff0 100644
--- a/src/__stories__/useToggle.story.tsx
+++ b/src/__stories__/useToggle.story.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {useToggle} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const [on, toggle, set] = useToggle(true);
@@ -16,6 +17,7 @@ const Demo = () => {
 };
 
 storiesOf('useToggle', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useToggle.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
diff --git a/src/__stories__/useTween.story.tsx b/src/__stories__/useTween.story.tsx
index 4aef7b48..b9591f49 100644
--- a/src/__stories__/useTween.story.tsx
+++ b/src/__stories__/useTween.story.tsx
@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useTween} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const t = useTween();
@@ -13,6 +14,7 @@ const Demo = () => {
 };
 
 storiesOf('useTween', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useTween.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
diff --git a/src/__stories__/useUnmount.story.tsx b/src/__stories__/useUnmount.story.tsx
index 5ffa2f16..0b744792 100644
--- a/src/__stories__/useUnmount.story.tsx
+++ b/src/__stories__/useUnmount.story.tsx
@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useUnmount} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   useUnmount(() => console.log('UNMOUNTED'));
@@ -8,6 +9,8 @@ const Demo = () => {
 };
 
 storiesOf('useUnmount', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useUnmount.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
+
diff --git a/src/__stories__/useWindowSize.story.tsx b/src/__stories__/useWindowSize.story.tsx
index fad14f8b..aea94884 100644
--- a/src/__stories__/useWindowSize.story.tsx
+++ b/src/__stories__/useWindowSize.story.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {useWindowSize} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const {width, height} = useWindowSize();
@@ -14,6 +15,7 @@ const Demo = () => {
 };
 
 storiesOf('useWindowSize', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useWindowSize.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
diff --git a/src/util/ShowDocs.tsx b/src/util/ShowDocs.tsx
new file mode 100644
index 00000000..2518d631
--- /dev/null
+++ b/src/util/ShowDocs.tsx
@@ -0,0 +1,102 @@
+import * as React from 'react';
+
+const h = React.createElement;
+
+const ShowDocs = (props) => {
+  return h('div', {},
+    h('div', {
+      style: {
+        padding: '0 20px'
+      },
+      dangerouslySetInnerHTML: {
+        __html: props.md
+      }
+    }),
+    h('style', {
+      dangerouslySetInnerHTML: {
+        __html: `
+@import url(http://fonts.googleapis.com/css?family=Merriweather:300italic,300);
+
+h1, h1 code, h2, h2 code, h3, h3 code, h4, h4 code {
+  color: #333;
+}
+
+html {
+  font-size: 16px;
+  max-width: 700px;
+  margin: auto;
+}
+
+body {
+  color: #444;
+  font-family: 'Merriweather', Georgia, serif;
+  max-width: 700px;
+  margin: auto;
+}
+
+/* === A bit of a gross hack so we can have bleeding divs/blockquotes. */
+
+div {
+  width: 100%;
+}
+
+div img {
+  width: 100%;
+}
+
+blockquote p {
+  font-size: 1.5rem;
+  font-style: italic;
+  margin: 1rem auto 1rem;
+  max-width: 48rem;
+}
+
+li {
+  margin-left: 2rem;
+}
+
+/* Counteract the specificity of the gross *:not() chain. */
+h1 {
+  padding: 1m 0 !important;
+}
+/*  === End gross hack */
+
+p {
+  color: #555;
+  height: auto;
+  line-height: 1.45;
+}
+
+pre, code {
+  font-family: Menlo, Monaco, "Courier New", monospace;
+  color: #42b983;
+}
+
+pre, pre code {
+  color: #000;
+}
+
+pre {
+  background-color: #fafafa;
+  font-size: .8rem;
+  overflow-x: scroll;
+  padding: 1.125em;
+}
+
+a, a pre, a code,
+a:visited {
+  color: #3498db;
+}
+
+a:hover,
+a:focus,
+a:active {
+  color: #2980b9;
+}
+        `
+      }
+    })
+  );
+};
+
+export default ShowDocs;