From 01579f9ed385d832d1e1e055fe41459d030f717d Mon Sep 17 00:00:00 2001
From: Joao Ribeiro <joao.ribeiro@addisongloballtd.com>
Date: Sat, 22 Jul 2017 00:29:19 +0200
Subject: [PATCH] Added React Docgen + Flowtype usage instrcutions

---
 addons/info/README.md | 68 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)

diff --git a/addons/info/README.md b/addons/info/README.md
index 65344a8f57d..9aa19137fc5 100644
--- a/addons/info/README.md
+++ b/addons/info/README.md
@@ -124,6 +124,74 @@ storiesOf('Component')
 
 > Have a look at [this example](example/story.js) stories to learn more about the `addWithInfo` API.
 
+To customize your defaults:
+
+```js
+// config.js
+import infoAddon, { setDefaults } from '@storybook/addon-info';
+
+// addon-info
+setDefaults({
+  inline: true,
+  maxPropsIntoLine: 1,
+  maxPropObjectKeys: 10,
+  maxPropArrayLength: 10,
+  maxPropStringLength: 100,
+});
+setAddon(infoAddon);
+```
+
+### React Docgen & Flowtype
+
+Install the babel docgen plugin
+
+```bash
+npm install -D babel-plugin-react-docgen
+```
+
+Add the plugin to your `.babelrc` config
+
+```json
+{
+  "plugins": ["react-docgen"]
+}
+```
+
+And add the flowtype definitions to your component
+
+```js
+// @flow
+import React from 'react';
+
+type PropsType = {
+    /** Boolean indicating wether the button should render as disabled */
+    disabled?: boolean,
+	/** button label. */
+	label: string,
+	/** onClick handler */
+	onClick?: Function,
+	/** component styles */
+	style?: {}
+};
+
+/** Button component description */
+const Button = ({ disabled, label, style, onClick }: PropType) => (
+  <button disabled={disabled} onClick={onClick}>
+    {label}
+  </button>
+);
+
+Button.defaultProps = {
+    disabled: false,
+	onClick: () => {},
+	style: {},
+};
+
+export default Button;
+```
+
+Storybook Info Addon should now render all the correct types for your component.
+
 ## The FAQ
 
 **Components lose their names on static build**