1.2.0 • Published 5 years ago

redux-devtools-dock-monitor v1.2.0

Weekly downloads
44,946
License
MIT
Repository
github
Last release
5 years ago

Redux DevTools Dock Monitor

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

npm.io

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';
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 changeMonitorKey prop.

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 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).
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 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

wps-driver-reactcra-template-teemsly-starter@crudlio/crudllst_front_mobile_refact@infinitebrahmanuniverse/nolb-redux-d@everything-registry/sub-chunk-2638wpacksteamer-reactsteamer-react-isomorphic@comynli/vjs-kernelisomorphic-boilerplateisomorphic-login-fastosjumpsuitjumpsuit-coreimclientappsparetesttxt2tsp-utiltopcoder-react-utils@airglow/plugin-devtools@angelsdice/react-scripts@angelsdice/react-scripts-site@atomic-reactor/actinium-auth@builtbypixel/nucleus-core@brite-inc/p5.js-web-editor-component@deli/crudlzephyr-refluxziadeskgcappwebpack.redux.react.typescript.jestuniversal-compiler-plugin-redux-devtoolsuniversal-reduxuniversal-redux-boilerplateuniversal-redux-jazzidouniversal-redux-render@hackoregon/emergency-response@garbas/mozilla-neo@lerayne/redux-ssr@madrus/client@madrus/admin@mapstore/project@nonlux/react-common@oniti/oniti-collection-crud@oyeharry/react-scripts-mrfmy-test-app-1messaging-modulendtp-web1op-sycmbnw-react-boilerplatenucleus-corepay2.0raumo-react-scriptsreact-crmrookroc-package-web-app-react-devroc-web-reactreact-app-template-lanlink-templatereact-migration-qa-releasereact-migration-qa-release2redux-devtools-presetredux-todos-examplesagess-notificationssfc-gpcart-qa-releasesfc-gpcart-releasesfc-qa-release-testharnessng-redux-devtools-configurernodewrite-core-adminpresentrrestack-corereplatpubsweet-frontendreduxmreducermreducermanagerredux-universal-rendererredux-universal-starterreduxible-devtoolsredux-async-boilerplatereaxtor-redux-examplereact-redux-deps-devreact-redux-expressreact-redux-webpack2-starterkitslimsuitreact-studyreact-scripts-custom-templategpcart-sfc-qa-releaseid-builderibloginibhubsloginiapi-uiibpaymentinversify-devtoolslernademo-adminlernademo-clientlive-react-routerlive-reduxkv-design@types/redux-devtools-dock-monitor@vibbio/utilscompany-module
1.2.0

5 years ago

1.1.4

5 years ago

1.1.3

8 years ago

1.1.2

8 years ago

1.1.1

9 years ago

1.1.0

9 years ago

1.0.1

10 years ago

1.0.0

10 years ago

1.0.0-beta-3

10 years ago

1.0.0-beta-2

10 years ago

1.0.0-beta-1

10 years ago