redux-devtools/packages/redux-devtools-dock-monitor
github-actions[bot] c9fe990a4d
Version Packages (#1140)
* Version Packages

* Update version numbers

* Update CHANGELOGs

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Nathan Bierema <nbierema@gmail.com>
2022-04-23 04:42:01 +00:00
..
src Add ESM builds (#997) 2022-01-10 15:41:53 +00:00
.eslintignore chore(deps): update all non-major dependencies (#1109) 2022-04-04 03:59:41 +00:00
.eslintrc.js Add ESM builds (#997) 2022-01-10 15:41:53 +00:00
babel.config.esm.json Imprrove ability to tree-shake libraries (#1050) 2022-01-24 02:11:46 +00:00
babel.config.json Imprrove ability to tree-shake libraries (#1050) 2022-01-24 02:11:46 +00:00
CHANGELOG.md Version Packages (#1140) 2022-04-23 04:42:01 +00:00
LICENSE.md chore(*): add back license files (#578) 2020-08-09 01:11:43 -04:00
package.json Version Packages (#1140) 2022-04-23 04:42:01 +00:00
README.md Add ESM builds (#997) 2022-01-10 15:41:53 +00:00
tsconfig.json Imprrove ability to tree-shake libraries (#1050) 2022-01-24 02:11:46 +00:00

Redux DevTools Dock Monitor

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

Installation

yarn add @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/core';
import { LogMonitor } from '@redux-devtools/log-monitor';
import { SliderMonitor } from '@redux-devtools/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