redux-devtools-dock-monitor

A resizable and movable dock for Redux DevTools monitors

Redux DevTools Dock Monitor

A resizable and movable dock for Redux DevTools. Powered by React Dock.

Installation

npm install --save-dev redux-devtools-dock-monitor

Usage

Wrap any other Redux DevTools monitor in DockMonitorto 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';
import LogMonitor from 'redux-devtools-log-monitor';
import SliderMonitor from 'redux-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 changeMonitorKeyprop.

Props

NameDescription
childrenAny valid Redux DevTools monitor. Required.
toggleVisibilityKeyA key or a key combination that toggles the dock visibility. Must be recognizable by parse-key(for example, 'ctrl-h'). Required.
changePositionKeyA key or a key combination that toggles the dock position. Must be recognizable by parse-key(for example, 'ctrl-w'). Required.
changeMonitorKeyA 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.
fluidWhen true, the dock size is a fraction of the window size, fixed otherwise. Optional. By default set to true.
defaultSizeSize of the dock. When fluidis true, a float (0.5means half the window size). When fluidis false, a width in pixels. Optional. By default set to 0.3(3/10th of the window size).
defaultPositionWhere the dock appears on the screen. Valid values: 'left', 'top', 'right', 'bottom'. Optional. By default set to 'right'.
defaultIsVisibleDefines whether dock should be open by default. A value of truemeans 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

HomePage

https://github.com/gaearon/redux-devtools-dock-monitor

Repository

https://github.com/gaearon/redux-devtools-dock-monitor.git


上一篇:react-dock
下一篇:bootstrap-webpack

相关推荐

官方社区

扫码加入 JavaScript 社区