mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-11-27 20:13:56 +03:00
faff0db47b
- remotedev-redux-devtools-extension@3.0.0-rc.1 - d3-state-visualizer@1.4.1 - d3tooltip@1.3.1 - map2tree@1.5.1 - react-base16-styling@0.8.1 - react-dock@0.4.1 - react-json-tree@0.15.1 - @redux-devtools/app@1.0.0-9 - @redux-devtools/chart-monitor@1.9.1 - @redux-devtools/cli@1.0.0-10 - @redux-devtools/dock-monitor@1.4.1 - @redux-devtools/extension@3.0.0-rc.1 - @redux-devtools/inspector-monitor-test-tab@0.7.3 - @redux-devtools/inspector-monitor-trace-tab@0.2.3 - @redux-devtools/inspector-monitor@1.0.1 - @redux-devtools/instrument@1.11.1 - @redux-devtools/log-monitor@2.3.1 - @redux-devtools/remote@0.6.0 - @redux-devtools/rtk-query-monitor@1.0.1 - @redux-devtools/serialize@0.3.1 - @redux-devtools/slider-monitor@2.0.0-9 - @redux-devtools/ui@1.0.0-10 - @redux-devtools/utils@1.0.0-7 - @redux-devtools/core@3.9.1 - d3-state-visualizer-tree-example@0.1.1 - react-dock-demo@0.1.1 - react-json-tree-example@1.1.3 - test-demo@0.1.1 - inspector-demo@0.1.1 - rtk-query-demo@0.1.1 - slider-todomvc@0.1.3 - counter-redux@0.1.3 - todomvc@0.2.2 |
||
|---|---|---|
| .. | ||
| src | ||
| .babelrc | ||
| .eslintignore | ||
| .eslintrc.js | ||
| CHANGELOG.md | ||
| LICENSE.md | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
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