Update useLogger docs and story

docs/useLogger.md

@@ -1,6 +1,6 @@
 # `useLogger`
 
-React lifecycle hook that logs in console as component transitions through life-cycles.
+React lifecycle hook that console logs parameters as component transitions through lifecycles.
 
 ## Usage
 
@@ -13,21 +13,19 @@ const Demo = (props) => {
 };
 ```
 
-
 ## Example Output
 
 ```
-Demo mounted
-Demo props updated {}
-Demo un-mounted
+Demo mounted {}
+Demo updated {}
+Demo unmounted
 ```
 
-
 ## Reference
 
 ```js
-useLogger(name, props);
+useLogger(componentName: string, ...rest);
 ```
 
-- `name` — component name.
-- `props` — latest props.
+- `componentName` — component name.
+- `...rest` — parameters to log.

src/__stories__/useLogger.story.tsx

@@ -1,15 +1,35 @@
 import {storiesOf} from '@storybook/react';
+import {withKnobs, text, boolean} from '@storybook/addon-knobs';
 import * as React from 'react';
+import {useCounter} from '..';
 import {useLogger} from '..';
 import ShowDocs from '../util/ShowDocs';
 
 const Demo = (props) => {
-  useLogger('Demo', props);
-  return null;
+  const [state, {inc}] = useCounter(0);
+
+  useLogger('Demo', props, state);
+
+  return (
+    <>
+      <p style={{fontWeight: props.bold ? 'bold' : 'normal'}}>
+        {props.title}
+      </p>
+      <button onClick={() => inc()}>
+        Update state ({state})
+      </button>
+    </>
+  );
 };
 
 storiesOf('Lifecycles|useLogger', module)
+  .addDecorator(withKnobs)
   .add('Docs', () => <ShowDocs md={require('../../docs/useLogger.md')} />)
-  .add('Demo', () =>
-    <Demo/>
-  )
+  .add('Demo', () => {
+    const props = {
+      title: text('title', 'Open the developer console to see logs'),
+      bold: boolean('bold', false),
+    }
+
+    return <Demo {...props} />
+  })