diff --git a/docs/useLogger.md b/docs/useLogger.md index 156e0530..662b6b07 100644 --- a/docs/useLogger.md +++ b/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. diff --git a/src/__stories__/useLogger.story.tsx b/src/__stories__/useLogger.story.tsx index 486dc12f..ab495849 100644 --- a/src/__stories__/useLogger.story.tsx +++ b/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 ( + <> +

+ {props.title} +

+ + + ); }; storiesOf('Lifecycles|useLogger', module) + .addDecorator(withKnobs) .add('Docs', () => ) - .add('Demo', () => - - ) + .add('Demo', () => { + const props = { + title: text('title', 'Open the developer console to see logs'), + bold: boolean('bold', false), + } + + return + })