Merge pull request #75 from jackielii/visible-on-load

add visibleOnLoad props to LogMonitor

README.md

@@ -15,6 +15,7 @@ A live-editing time travel environment for [Redux](https://github.com/rackt/redu
 * With `persistState()` store enhancer, you can persist debug sessions across page reloads
 * To monitor a part of the state, you can set a `select` prop on the DevTools component: `<DevTools select={state => state.todos} store={store} monitor={LogMonitor} />`
 * Toggle visibility with Ctrl+H
+* To hide the devtools on load, set `visibleOnLoad` to false, e.g.: `<DevTools store={store} monitor={LogMonitor} visibleOnLoad={false} />`
 
 ### Installation
 

examples/counter/containers/App.js

@@ -31,7 +31,7 @@ export default class App extends Component {
         </Provider>
         <DebugPanel top right bottom>
           <DevTools store={store}
-                    monitor={LogMonitor} />
+                    monitor={LogMonitor} visibleOnLoad={true} />
         </DebugPanel>
       </div>
     );

src/react/LogMonitor.js

@@ -52,13 +52,15 @@ export default class LogMonitor {
     toggleAction: PropTypes.func.isRequired,
     jumpToState: PropTypes.func.isRequired,
     setMonitorState: PropTypes.func.isRequired,
-    select: PropTypes.func.isRequired
+    select: PropTypes.func.isRequired,
+    visibleOnLoad: PropTypes.bool
   };
 
   static defaultProps = {
     select: (state) => state,
     monitorState: { isVisible: true },
-    theme: 'nicinabox'
+    theme: 'nicinabox',
+    visibleOnLoad: true
   };
 
   componentWillReceiveProps(nextProps) {
@@ -90,6 +92,15 @@ export default class LogMonitor {
     }
   }
 
+  componentWillMount() {
+    let visibleOnLoad = this.props.visibleOnLoad;
+    const { monitorState } = this.props;
+    this.props.setMonitorState({
+      ...monitorState,
+      isVisible: visibleOnLoad
+    });
+  }
+
   handleRollback() {
     this.props.rollback();
   }