documentation for debug HOC

Author: tomvej

README.md

@@ -3,12 +3,44 @@ Debug utils for react components. Intended for development only, not for product
 
 ## debug HOC
 
-Lets you see in console when component mounts, unmounts, updates and why it updated
+Lets you see in console when component mounts, unmounts, updates and why it updated:
 
-Basic usage:
 ```
 import {debug} from "@morosystems/react-debug";
-...
+
 export default debug()(MyComponent);
 ```
-Advanced usage: TODO
+
+This logs roughly the following information:
+```
+MyComponent mounts
+MyComponent updates name,input
+MyComponent updates error
+MyComponent unmounts
+```
+
+Displayed information can be changed using the configuration object, e.g.:
+```
+export default debug({name: 'Test'})(MyComponent);
+```
+
+### Component name
+You can specify name that is logged using the `name` property. You can specify:
+1. String.
+2. Function of props. This is useful when debugging one specific instance of generic component, e.g. `Field`.
+
+```
+export default debug({name: (props) => props.input.name})(Field);
+```
+### Custom logging
+You can also use custom messages for each lifecycle event.
+1. `mount` as a function from props to string.
+2. `update` as a function from props and next props to string.
+3. `unmount` as a function from props to string.
+
+You can also supress loging by returning `null`, `undefined` or `false`:
+```
+const update = (props, nextProps) => (props.name !== nextProps.name) && `${props.name} updates to ${nextProps.name}`;
+
+export default debug({update})(MyComponent);
+```