# redux-devtools-dock-monitor
> A resizable and movable dock for Redux DevTools monitors
Latest version **1.2.0** (published 2020-09-07) · MIT license · 0 weekly downloads
> **Deprecated.** This package is deprecated.
## Install
```sh
npm install redux-devtools-dock-monitor
pnpm add redux-devtools-dock-monitor
yarn add redux-devtools-dock-monitor
bun add redux-devtools-dock-monitor
```
## Health
**Score 10/100 (F)** — status: deprecated.
Negative: deprecated.
## Facts
| | |
|---|---|
| Version | 1.2.0 |
| Published | 2020-09-07 |
| First published | 2015-10-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 64.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 14367 |
| Author | Dan Abramov |
| Maintainers | gaearon, jtorraca, timdorr, zalmoxisus, methuselah96 |
| Keywords | redux, devtools, flux, react, hot reloading, time travel, live edit |
## Links
- npm: https://www.npmjs.com/package/redux-devtools-dock-monitor
- Repository: https://github.com/reduxjs/redux-devtools
- Homepage: https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor
- Issues: https://github.com/reduxjs/redux-devtools/issues
- npm.io page: https://npm.io/package/redux-devtools-dock-monitor
## Dependencies (4)
- [parse-key](https://npm.io/package/parse-key.md) ^0.2.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [react-dock](https://npm.io/package/react-dock.md) ^0.3.0
- [@types/prop-types](https://npm.io/package/@types/prop-types.md) ^15.7.3
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 1.2.0 (latest) — 2020-09-07
- 1.1.4 — 2020-08-14
- 1.1.3 — 2017-12-26
- 1.1.2 — 2017-04-25
- 1.1.1 — 2016-04-02
- 1.1.0 — 2016-02-19
- 1.0.1 — 2015-12-14
- 1.0.0 — 2015-12-14
- 1.0.0-beta-3 — 2015-10-17
- 1.0.0-beta-2 — 2015-10-17
- 1.0.0-beta-1 — 2015-10-16
## README
# 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/alexkuz/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';
import LogMonitor from 'redux-devtools-log-monitor';
import SliderMonitor from 'redux-slider-monitor';
import DockMonitor from 'redux-devtools-dock-monitor';
export default createDevTools(
);
```
[Read how to start using Redux DevTools.](https://github.com/reduxjs/redux-devtools)
#### Multiple Monitors
You can put more than one monitor inside ``. 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
---
_Source: https://npm.io/package/redux-devtools-dock-monitor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._