gaearon / redux-devtools-dock-monitor

A resizable and movable dock for Redux DevTools monitors

Redux DevTools Dock Monitor

A resizable and movable dock for Redux DevTools.
Powered by React Dock.

Installation

npm install --save-dev redux-devtools-dock-monitor

Usage

Wrap any other Redux DevTools monitor in DockMonitor to make it dockable to different screen edges. For example, you can use it together with LogMonitor:

containers/DevTools.js

import React from 'react';
import { createDevTools } from 'redux-devtools';
import LogMonitor from 'redux-devtools-log-monitor';
import SliderMonitor from 'redux-slider-monitor';
import DockMonitor from 'redux-devtools-dock-monitor';

export default createDevTools(
  <DockMonitor toggleVisibilityKey='ctrl-h'
               changePositionKey='ctrl-q'
               changeMonitorKey='ctrl-m'>
    <LogMonitor />
    <SliderMonitor />
  </DockMonitor>
);

Read how to start using Redux DevTools.

Multiple Monitors

You can put more than one monitor inside <DockMonitor>. There will still be a single dock, but you will be able to switch between different monitors by pressing a key specified as changeMonitorKey prop.

Props

Name	Description
children	Any valid Redux DevTools monitor. Required.
toggleVisibilityKey	A key or a key combination that toggles the dock visibility. Must be recognizable by parse-key (for example, 'ctrl-h'). Required.
changePositionKey	A key or a key combination that toggles the dock position. Must be recognizable by parse-key (for example, 'ctrl-w'). Required.
changeMonitorKey	A key or a key combination that switches the currently visible monitor. Must be recognizable by parse-key (for example, 'ctrl-m'). Required if you use more than one monitor.
fluid	When true, the dock size is a fraction of the window size, fixed otherwise. Optional. By default set to true.
defaultSize	Size of the dock. When fluid is true, a float (0.5 means half the window size). When fluid is false, a width in pixels. Optional. By default set to 0.3 (3/10th of the window size).
defaultPosition	Where the dock appears on the screen. Valid values: 'left', 'top', 'right', 'bottom'. Optional. By default set to 'right'.
defaultIsVisible	Defines whether dock should be open by default. A value of true means that it's open when the page/app loads.

The current size and the position are persisted between sessions with persistState() enhancer from Redux DevTools.

License

MIT

redux-devtools-dock-monitor's Issues

Uncaught TypeError: Cannot read property 'position' of undefined

I learn the usage from the example https://github.com/gaearon/redux-devtools/tree/next/examples/counter :

DevTools = createDevTools(
  <DockMonitor toggleVisibilityKey='H' changePositionKey='Q'>
    <LogMonitor />
  </DockMonitor>
)

ReactDOM.render(
  <div>
    <Provider store={store}>
      <div>
        <App />
        <DevTools />
      </div>
    </Provider>
  </div>
  document.getElementById('app')
)

Then DockMonitor throw an Error Uncaught TypeError: Cannot read property 'position' of undefined, I found it caused by the code https://github.com/gaearon/redux-devtools-dock-monitor/blob/master/src/DockMonitor.js#L74, because props.monitorState is not exist.

Is any step I missed?

React v16 warning

In react v16.12 has warning:
Warning: componentWillReceiveProps has been renamed, and is not recommended for use. ...
Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. ...
Please update the following components: Dock, JSONNestedNode, JSONTree, LogMonitor

Errors on React 15.3

warning.js:44 Warning: Failed prop type: Required prop `monitorState.position` was not specified in `DockMonitor`.

Cannot read property 'position' of undefined

All of a sudden I'm seeing this error in my JS Console. I'm starting to investigate, but wanted to log here.

Seems to be blocking several keyboard shortcuts.

When i try using redux-devtools-dock-monitor it seems to be blocking all keyboard shortcuts using ctrl in them, so i cannot use ctrl + c or ctrl + r or a page which uses this. When commenting out the handleKeyDown call it all seems to work again.

Wanted to be sure if this works with typescript, cause I have errors all over ???!!!

Does this work with typeScript? it throws errors for .ts file extension

not able to install redux-devtools-multiple-monitors@^1.1.1

npm ERR! No compatible version found: redux-devtools-multiple-monitors@^1.1.1
npm ERR! Valid install targets:
npm ERR! 1.0.1, 1.0.0

The package.json here describes there is 1.1.1 version though.

Keyboard commands fail when a query string is contained in URL

When using react-router-redux and providing a query string in the URL, on initial load of the page you get an error when trying to use both 'cmd + h' & 'cmd + q'.

The error is as follows:

object.hasOwnProperty is not a function

And it occurs in the history lib, but when looking in the stack trace, the command which causes the error initially is on line 92 of the DockMonitor.js file.

Versions of dependencies are:

React-Router-Redux - 3.0.0
History - 2.0.1
Redux-Devtools-Dock-Monitor - 1.1.1

This only happens when you load the page through the browser and not when navigating via the history object.

keyboard shortcuts don't work with firefox 42

I get this error: ReferenceError: event is not defined

Support for multiple monitors?

Might be out of scope for the project (if so, let me know and I'll try to help out), but I'd love to see the DockMonitor be able to take multiple children - possibly displaying them as tabs, etc.

`reset` and `revert` buttons break application when using Redux router

Have been messing around with react/webpack/redux and the redux-devtools for a the past week. Everything works, but when I include ReduxRouter into the mix, pressing the reset or revert button on the dock monitor breaks the application.

I've compared my application with the devtools examples, but can't seem to find what I did wrong, so I think this is a bug, or am I missing something?

I get the following error messages when pressing one of the buttons. Everything else works as expected:

Warning: Failed propType: Required prop `location` was not specified in `RoutingContext`. Check the render method of `ReduxRouterContext`

Warning: Failed propType: Required prop `routes` was not specified in `RoutingContext`. Check the render method of `ReduxRouterContext`

Warning: Failed propType: Required prop `params` was not specified in `RoutingContext`. Check the render method of `ReduxRouterContext`

Warning: Failed propType: Required prop `components` was not specified in `RoutingContext`. Check the render method of `ReduxRouterContext`

Warning: Failed Context Types: Required child context `location` was not specified in `RoutingContext`. Check the render method of `ReduxRouterContext`.

---

I'm using:

• React 0.14.0
• React router 1.0.0-rc4
• Redux 3.0.4
• redux-router 1.0.0-beta3
• redux-devtools 3.0.0-beta-3
• redux-devtools-dock-monitor 1.0.0-beta-3
• redux-devtools-log-monitor 1.0.0-beta-3

---

Store.js

import { createStore, compose } from 'redux';
import { persistState } from 'redux-devtools';
import rootReducer from '../reducers';
import DevTools from '../containers/DevTools';
import { reduxReactRouter } from 'redux-router';
import { createHistory } from 'history';

const finalCreateStore = compose(
  reduxReactRouter({ createHistory }),
  DevTools.instrument(),
  persistState(
    window.location.href.match(
      /[?&]debug_session=([^&]+)\b/
    )
  )
)(createStore);

export default function configureStore(initialState) {
  const store = finalCreateStore(rootReducer, initialState);

  if (module.hot) {
    module.hot.accept('../reducers', () =>
      store.replaceReducer(require('../reducers'))
    );
  }

  return store;
}

---

RootReducer.js

import todos from './todos';
import { combineReducers } from 'redux';
import { routerStateReducer } from 'redux-router';

const rootReducer = combineReducers({
  router: routerStateReducer,
  todos
})

export default rootReducer;

---

RootContainer.js

import React, { Component } from 'react';
import NavLink from '../components/NavLink';
import DevTools from './DevTools';

export default class Root extends Component {
  render() {
    return (
      <div>
        <NavLink to="/">
          Todos
        </NavLink>
        <NavLink to="/archived">
          Archived
        </NavLink>
        {this.props.children}
        <DevTools />
      </div>
    );
  }
}

Uncaught TypeError: Cannot read property 'position' of undefined

I get this error when following the docs on how to get DevTools to work.
The culprit is line 89:

    var position = monitorState.position;

"event is not defined" with 1.0.0-beta-3

The version published to npm doesn't contain this change: ecc67af

remember size

if I resize the dock monitor, then navigate to a new route, the dock monitor resizes back to it's original size. It'd be nice if the monitor would remember the it's previous size/position/etc

babel transpiles to invalid javascript

using 1.0.0, these lines

function position(state = props.defaultPosition, action, props) {
  return (action.type === CHANGE_POSITION) ?
    POSITIONS[(POSITIONS.indexOf(state) + 1) % POSITIONS.length] :
    state;
}

become

function position() {
  var state = arguments.length <= 0 || arguments[0] === undefined ? props.defaultPosition : arguments[0];
  var action = arguments[1];
  var props = arguments[2];

  return action.type === _actions.CHANGE_POSITION ? _constants.POSITIONS[(_constants.POSITIONS.indexOf(state) + 1) % _constants.POSITIONS.length] : state;
}

which errors with TypeError: Cannot read property 'defaultPosition' of undefined

Configurable keyboard hooks

We currently let user specify toggleVisibilityKey and changePositionKey, but this probably isn't enough because in some cases either ctrl messes things up, or keypress doesn't even get fired. We should probably expose a way to fully customize keyboard shortcuts, but it isn't obvious to me what kind of API is needed.

defaultIsVisible & defaultPosition don't seem to do anything

Trying to start the dock monitor hidden:

const DevTools = createDevTools(
  <DockMonitor
    toggleVisibilityKey="ctrl-h"
    changePositionKey="ctrl-q"
    defaultPosition="left"
    defaultIsVisible={false}
  >
      <ChartMonitor />
  </DockMonitor>
);

But it doesn't seem to be doing anything. Looking through the source of DockMonitor, I don't see these two props being used anywhere.

As a test added in DockMonitor compiled code:

  DockMonitor.prototype.componentWillMount = function componentWillMount() {
    var _props = this.props;
    var monitorState = _props.monitorState;
    monitorState.isVisible = _props.defaultIsVisible;
  }

Seems to solve my problem. Am I overlooking something?

child.type.update is not a function

Please, push the new version to npm, because in npm it has this code:

// reducers.js
function childMonitorState(props, state, action) {
  var child = props.children;
  return child.type.update(child.props, state, action); 
}

but master branch is:

// reducers.js
function childMonitorState(props, state, action) {
  var child = props.children;
  return child.type.reducer(child.props, state, action); 
}

and it's don't wanna work 😟

shortcuts without modifier keys prevent writing that key in inputs

<DockMonitor toggleVisibilityKey='s'>
  <LogMonitor/>
</DockMonitor>

Hi,

setting a shortcut like that (without a modifier key) prevents me from typing that letter in inputs (because handleKeyDown() calls event.preventDefault())

one solution for this would be to add this line
if (e.target !== document.body) return
to handleKeyDown() because if an input is focused the target of the keydown event is that input, if no input is focused the target of the event is the body

another solution would be to return if the tag name of the target of the event is input, textarea, etc.

would you be open to doing one of these things, or some other way of not triggering the shortcuts while an input is focused?

Thanks,
Nuno

(also, thanks a lot for all you've done with redux,etc it plays a big part in how i write apps now 😃 )

Incompatible with Babel 6

Hey,
when trying to run npm test
testing with enzyme

enzyme: "^3.1.0"
react-scripts: "^1.0.14"
react*: "^16.0.0"

ReferenceError: [BABEL] <app_path>\node_modules\react-pure-render\function.js: Using removed Babel 5 option:<app_path>\node_modules\react-pure-render.babelrc.stage - Check out the corresponding stage-x presets http://babeljs.io/docs/plugins/#presets

  at Logger.error (node_modules/babel-core/lib/transformation/file/logger.js:41:11)
  at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:220:20)
  at OptionManager.init (node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
  at File.initOptions (node_modules/babel-core/lib/transformation/file/index.js:212:65)
  at new File (node_modules/babel-core/lib/transformation/file/index.js:135:24)
  at Pipeline.transform (node_modules/babel-core/lib/transformation/pipeline.js:46:16)

Plans to allow to toggle without modifiers ?

Currently we need to use ctrl + something.
I am currently working on a phonegap app, so sometimes I test on an actual smartphone and I would like to be able to hide redux devtools.
I am not sure how I can handle ctrl on an iphone :D
Any idea how we can handle that ?

Uncaught TypeError: Cannot read property 'position' of null

I don't think this is related to #6 since I applied DevTools.instrument. Also, everything seems to function properly without DockMonitor.

Snippet:

import React, { PropTypes } from 'react';

import { Provider } from 'react-redux';
import { ReduxRouter } from 'redux-router';
import Helmet from 'react-helmet';
import routes from './routes';

export default class Root extends React.Component {
  static propTypes = {
    store: PropTypes.object.isRequired
  };

  constructor(props, context) {
    super(props, context);
  }

  render() {
    const devTools = this.renderDevTools();

    return (
      <div>
        <Helmet titleTemplate="React Redux Starter Kit - %s" />

        <Provider store={this.props.store}>
          <div>
            <ReduxRouter>{routes}</ReduxRouter>
            {devTools}
          </div>
        </Provider>
      </div>
    );
  }

  renderDevTools() {
    if ( _DEV_ ) {
      const createDevTools = require('redux-devtools').createDevTools;
      const DockMonitor = require('redux-devtools-dock-monitor');
      const LogMonitor = require('redux-devtools-log-monitor');

      const DevTools = createDevTools(
        <DockMonitor
          toggleVisibilityKey="H"
          changePositionKey="Q">
          <LogMonitor />
        </DockMonitor>
      );

      return <DevTools />;
    }

    return null;
  }
}

Check this repo

Allow for a more mobile friendly hide/show

At the moment I'm looking at trying to get package integrated for uses in mobile apps where we run into an issue and obviously don't have the redux-dev-tools browser plugin to assist. The main issue im trying to work around is that CTRL+H isn't the most accessible key for phones.

My first idea just to get things working for my own uses would be the multi-tap approach where I bind a multi tap or swipe/shake gesture to then send the CTRL+H press. I will update back with any progress I make and if there is any major hurdles for an end-user being able to do this and how it could possibly be upstreamed.

Another path I thought of which could also be nice would allowing the hidden state to show a pullout button/tab in the corner it hides away to that could be tapped to bring it back out and send it back in.

Let me know if anyone has any suggestions for another path I should be taking or if any of my ideas sound good enough to look at as a potential feature/change.

Ctrl-Shift-i not working in Google Chrome 45.0.2454.101 (64-bit)

Reason:

DockMonitor.prototype.handleKeyDown = function handleKeyDown(e) {
    if (!e.ctrlKey) {
      return;
    }
    e.preventDefault();

with commented e.preventDefault(); all works as expected

Dock Monitor is white and has artifacts on dropdown menus

My dock is looking discolored, and the arrows on the state dropdown menus are having "artifacts".
I'd supply you with some information to make it easier for you to help out, but quite frankly, i don't know what you'd need. I followed the Redux Devtools Walkthrough, in setting it up.

This is how it looks:

Module not found: Error: Can't resolve 'react-dock'

when i use redux-devtools, i get the error below:

ERROR in ./~/.npminstall/redux-devtools-dock-monitor/1.1.1/redux-devtools-dock-monitor/lib/DockMonitor.js Module not found: Error: Can't resolve 'react-dock' in 'E:\qw\demo\react-blog-demo\node_modules\.npminstall\redux-devtools-dock-monitor\1.1.1\redux-devtools-dock-monitor\lib' @ ./~/.npminstall/redux-devtools-dock-monitor/1.1.1/redux-devtools-dock-monitor/lib/DockMonitor.js 11:17-38 @ ./~/.npminstall/redux-devtools-dock-monitor/1.1.1/redux-devtools-dock-monitor/lib/index.js @ ./src/redux/DevTools.js @ ./src/app.jsx @ multi ./~/.npminstall/webpack-dev-server/2.4.1/webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/app.jsx

my 'package.json' like this:

"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"babel-preset-stage-0": "^6.22.0",
"classnames": "^2.2.5",
"css-loader": "^0.26.1",
"html-webpack-plugin": "^2.28.0",
"node-sass": "^4.5.0",
"react-css-modules": "^4.1.0",
"redux-devtools": "^3.3.2",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.2.0",
"sass-loader": "^6.0.1",
"style-loader": "^0.13.1",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
},
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-redux": "^5.0.2",
"react-router": "^3.0.2",
"react-router-redux": "^4.0.8",
"redux": "^3.6.0",
"redux-composable-fetch": "^0.3.4",
"redux-thunk": "^2.2.0"
}

is that error means: I dont't install the package named 'react-dock' in 'redux-devtools-dock-monitor'? I uninstall 'redux-devtools', 'redux-devtools-dock-monitor' and 'redux-devtools-log-monitor', and then reinstall them. it still don't work.
is it caused just by a network error? help!

core-js@<3 warning (FYI low priority)

npm WARN deprecated [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

From [email protected] dependancy

├─┬ [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]

Default values for required props

Is there any particular reason why both toggleVisibilityKey and changePositionKey props can't have default values set?

Any plans to release 1.0.0-beta-4?

Hey @gaearon,

Any plans to publish beta-4 to npm?
It contains some fixes that I am interested in, namely the fix for global event in DockMonitor that prevents it from working nicely in some browsers.