mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-11-15 14:17:07 +03:00
b82de74592
* Use rollup for d3tooltip * Use rollup for map2tree * Set moduleResolution * Use rollup for d3-state-visualizer * Use rollup for react-base16-styling * Use rollup for react-dock * Use rollup for react-json-tree * Use rollup for redux-devtools * Use rollup for redux-devtools-intrument * Use rollup for redux-devtools-chart-monitor * Update export * Use rollup for redux-devtools-dock-monitor * Use rollup for redux-devtools-inspector-monitor * Fix inspector demo * Fix invalid eslint config * Use rollup for inspector-monitor-test-tab * Use rollup for inspector-monitor-trace-tab * Use rollup for redux-devtools-log-monitor * Use rollup for redux-devtools-remote * Use rollup in redux-devtools-rtk-query-monitor * Use rollup for redux-devtools-serialize * Fix redux-devtools examples * Use rollup for redux-devtools-slider-monitor * Fix slider examples * Use rollup for redux-devtools-ui * Use rollup for redux-devtools-utils * Use rollup for redux-devtools-extension * Use rollup for redux-devtools-app * Fix Webpack app build * Fix extension build * Turn on minimization * Update CLI
64 lines
3.9 KiB
Markdown
64 lines
3.9 KiB
Markdown
# Redux DevTools Dock Monitor
|
|
|
|
A resizable and movable dock for [Redux DevTools](https://github.com/reduxjs/redux-devtools).
|
|
Powered by [React Dock](https://github.com/reduxjs/redux-devtools/tree/main/packages/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`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-log-monitor):
|
|
|
|
##### `containers/DevTools.js`
|
|
|
|
```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.](https://github.com/reduxjs/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](https://github.com/thlorenz/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](https://github.com/thlorenz/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](https://github.com/thlorenz/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
|