diff --git a/README.md b/README.md index 0bd78c0d..6f90a5d7 100644 --- a/README.md +++ b/README.md @@ -13,8 +13,9 @@ A live-editing time travel environment for [Redux](https://github.com/rackt/redu * If you change the reducer code, each “staged” action will be re-evaluted * If the reducers throw, you will see during which action this happened, and what the error was * 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: ` state.todos} store={store} monitor={LogMonitor} />` +* To monitor a part of the state, you can set a `select` prop on the DevTools component: ` state.todos} store={store} monitor={LogMonitor} />` * Toggle visibility with Ctrl+H +* To hide the devtools on load, set `visibleOnLoad` to false, e.g.: `` ### Installation diff --git a/examples/counter/containers/App.js b/examples/counter/containers/App.js index 322746cc..0ede0ed9 100644 --- a/examples/counter/containers/App.js +++ b/examples/counter/containers/App.js @@ -31,7 +31,7 @@ export default class App extends Component { + monitor={LogMonitor} visibleOnLoad={true} /> ); diff --git a/src/react/LogMonitor.js b/src/react/LogMonitor.js index fffc81fb..a3fc84c2 100644 --- a/src/react/LogMonitor.js +++ b/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(); }