1 | # Redux DevTools Dock Monitor
|
2 |
|
3 | A resizable and movable dock for [Redux DevTools](https://github.com/reduxjs/redux-devtools).
|
4 | Powered by [React Dock](https://github.com/alexkuz/react-dock).
|
5 |
|
6 | ![](http://i.imgur.com/QbNzNW4.gif)
|
7 |
|
8 | ### Installation
|
9 |
|
10 | ```
|
11 | yarn add redux-devtools-dock-monitor
|
12 | ```
|
13 |
|
14 | ### Usage
|
15 |
|
16 | Wrap any other Redux DevTools monitor in `DockMonitor` to make it dockable to different screen edges.
|
17 | For example, you can use it together with [`LogMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-log-monitor):
|
18 |
|
19 | ##### `containers/DevTools.js`
|
20 |
|
21 | ```js
|
22 | import React from 'react';
|
23 | import { createDevTools } from 'redux-devtools';
|
24 | import LogMonitor from 'redux-devtools-log-monitor';
|
25 | import SliderMonitor from 'redux-slider-monitor';
|
26 | import DockMonitor from 'redux-devtools-dock-monitor';
|
27 |
|
28 | export default createDevTools(
|
29 | <DockMonitor
|
30 | toggleVisibilityKey="ctrl-h"
|
31 | changePositionKey="ctrl-q"
|
32 | changeMonitorKey="ctrl-m"
|
33 | >
|
34 | <LogMonitor />
|
35 | <SliderMonitor />
|
36 | </DockMonitor>
|
37 | );
|
38 | ```
|
39 |
|
40 | [Read how to start using Redux DevTools.](https://github.com/reduxjs/redux-devtools)
|
41 |
|
42 | #### Multiple Monitors
|
43 |
|
44 | 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.
|
45 |
|
46 | ### Props
|
47 |
|
48 | | Name | Description |
|
49 | | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
50 | | `children` | Any valid Redux DevTools monitor. Required. |
|
51 | | `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. |
|
52 | | `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. |
|
53 | | `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. |
|
54 | | `fluid` | When `true`, the dock size is a fraction of the window size, fixed otherwise. Optional. By default set to `true`. |
|
55 | | `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). |
|
56 | | `defaultPosition` | Where the dock appears on the screen. Valid values: `'left'`, `'top'`, `'right'`, `'bottom'`. Optional. By default set to `'right'`. |
|
57 | | `defaultIsVisible` | Defines whether dock should be open by default. A value of `true` means that it's open when the page/app loads. |
|
58 |
|
59 | The current size and the position are persisted between sessions with `persistState()` enhancer from Redux DevTools.
|
60 |
|
61 | ### License
|
62 |
|
63 | MIT
|