mirror of https://github.com/reduxjs/redux-devtools.git synced 2024-11-22 09:36:43 +03:00

History

Nathan Bierema a4c987fc1f Publish - remotedev-redux-devtools-extension@3.0.1 - d3-state-visualizer@1.5.0 - d3tooltip@2.0.0 - map2tree@2.0.0 - react-base16-styling@0.9.0 - react-dock@0.5.0 - react-json-tree@0.16.0 - @redux-devtools/app@2.0.0 - @redux-devtools/chart-monitor@2.0.0 - @redux-devtools/cli@1.0.1 - @redux-devtools/dock-monitor@2.0.0 - @redux-devtools/extension@3.1.0 - @redux-devtools/inspector-monitor-test-tab@0.8.0 - @redux-devtools/inspector-monitor-trace-tab@0.3.0 - @redux-devtools/inspector-monitor@2.0.0 - @redux-devtools/instrument@2.0.0 - @redux-devtools/log-monitor@3.0.0 - @redux-devtools/remote@0.7.0 - @redux-devtools/rtk-query-monitor@2.0.0 - @redux-devtools/serialize@0.4.0 - @redux-devtools/slider-monitor@3.0.0 - @redux-devtools/ui@1.1.0 - @redux-devtools/utils@1.1.0 - @redux-devtools/core@3.10.0 - d3-state-visualizer-tree-example@0.1.3 - react-dock-demo@0.1.3 - react-json-tree-example@1.1.5 - test-demo@0.1.3 - inspector-demo@0.1.3 - rtk-query-demo@0.1.3 - slider-todomvc@0.1.5 - counter-redux@0.1.5 - todomvc@0.2.4		2022-01-10 14:08:33 -05:00
..
src	Add ESM builds (#997 )	2022-01-10 15:41:53 +00:00
.babelrc	Add ESM builds (#997 )	2022-01-10 15:41:53 +00:00
.eslintignore	Add ESM builds (#997 )	2022-01-10 15:41:53 +00:00
.eslintrc.js	Add ESM builds (#997 )	2022-01-10 15:41:53 +00:00
CHANGELOG.md	chore(*): run prettier	2021-03-06 10:51:16 -05:00
LICENSE.md	chore(*): add back license files (#578 )	2020-08-09 01:11:43 -04:00
package.json	Publish	2022-01-10 14:08:33 -05:00
README.md	Add ESM builds (#997 )	2022-01-10 15:41:53 +00:00
rollup.config.js	Add ESM builds (#997 )	2022-01-10 15:41:53 +00:00
tsconfig.json	feat(redux-devtools-dock-monitor): convert to TypeScript (#609 )	2020-08-26 09:22:53 -04:00

README.md

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