mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-09-21 03:19:12 +03:00
bdb9b953ef
- remotedev-redux-devtools-extension@3.0.5 - d3-state-visualizer@1.6.0 - d3tooltip@2.1.0 - map2tree@2.1.0 - react-base16-styling@0.9.1 - react-dock@0.5.1 - react-json-tree@0.16.1 - @redux-devtools/app@2.1.0 - @redux-devtools/chart-monitor@2.1.0 - @redux-devtools/cli@1.0.5 - @redux-devtools/dock-monitor@2.1.0 - @redux-devtools/extension@3.2.0 - @redux-devtools/inspector-monitor-test-tab@0.8.4 - @redux-devtools/inspector-monitor-trace-tab@0.3.3 - @redux-devtools/inspector-monitor@2.1.0 - @redux-devtools/instrument@2.1.0 - @redux-devtools/log-monitor@3.1.0 - @redux-devtools/remote@0.7.3 - @redux-devtools/rtk-query-monitor@2.1.0 - @redux-devtools/serialize@0.4.1 - @redux-devtools/slider-monitor@3.1.0 - @redux-devtools/ui@1.2.0 - @redux-devtools/utils@1.2.0 - @redux-devtools/core@3.11.0 - d3-state-visualizer-tree-example@0.1.4 - react-dock-demo@0.1.4 - react-json-tree-example@1.1.6 - test-demo@0.1.7 - inspector-demo@0.1.5 - rtk-query-demo@0.1.6 - slider-todomvc@0.1.8 - counter-redux@0.1.7 - todomvc@0.2.6 |
||
|---|---|---|
| .. | ||
| src | ||
| .eslintignore | ||
| .eslintrc.js | ||
| babel.config.esm.json | ||
| babel.config.json | ||
| 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