• Stars
    star
    405
  • Rank 106,656 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 9 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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 (for example, 'ctrl-h'). Required.
changePositionKey A key or a key combination that toggles the dock position. Must be recognizable by 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 (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

More Repositories

1

react-hot-loader

Tweak React components in real time. (Deprecated: use Fast Refresh instead.)
JavaScript
12,257
star
2

overreacted.io

Personal blog by Dan Abramov.
JavaScript
7,053
star
3

react-hot-boilerplate

Minimal live-editing example for React
JavaScript
3,905
star
4

react-transform-boilerplate

A new Webpack boilerplate with hot reloading React components, and error handling on module and component level.
JavaScript
3,372
star
5

whatthefuck.is

An opinionated glossary of computer science terms for front-end developers. Written by Dan Abramov.
CSS
3,008
star
6

react-makes-you-sad

Here’s a flowchart to make you happy again!
Makefile
2,093
star
7

react-document-title

Declarative, nested, stateful, isomorphic document.title for React
JavaScript
1,866
star
8

flux-react-router-example

A sample app showcasing Flux with React Router
JavaScript
1,431
star
9

react-side-effect

Create components whose nested prop changes map to a global side effect
JavaScript
1,217
star
10

babel-plugin-react-transform

Babel plugin to instrument React components with custom transforms
JavaScript
1,080
star
11

suspense-experimental-github-demo

Sample project built with Suspense to demonstrate render-as-you-fetch
JavaScript
807
star
12

todos

Examples for “Idiomatic Redux”: one branch per lesson
JavaScript
802
star
13

react-transform-hmr

A React Transform that enables hot reloading React classes using Hot Module Replacement API
JavaScript
779
star
14

subliminal

An opinionated minimalistic VS Code theme for JavaScript
632
star
15

react-proxy

Proxies React components without unmounting or losing their state
JavaScript
459
star
16

react-pure-render

[No Maintenance Intended] A function, a component and a mixin for React pure rendering
JavaScript
451
star
17

library-boilerplate

An opinionated boilerplate for React libraries including ESLint, Mocha, Babel, Webpack and an example powered by Webpack Dev Server and React Hot Loader
JavaScript
386
star
18

redux-devtools-log-monitor

The default monitor for Redux DevTools with a tree view
JavaScript
310
star
19

react-blessed-hot-motion

A console app demo using React for rendering, animation, and hot reloading
JavaScript
281
star
20

react-lag-radar

JavaScript
272
star
21

promise-loader

A webpack bundle-loader ripoff with promise interface
JavaScript
216
star
22

react-transform-catch-errors

React Transform that catches errors inside React components
JavaScript
184
star
23

react-elmish-example

My personal attempt at understanding Elm architecture
HTML
170
star
24

react-deep-force-update

Force-updates React component tree recursively
JavaScript
122
star
25

the-redux-journey

Slides from my talk at React Europe 2016
JavaScript
89
star
26

react-hot-api

(Deprecated) A generic library implementing hot reload for React components without unmounting or losing their state
JavaScript
88
star
27

gitbook-plugin-prism

Gitbook plugin for Prism highlighting
JavaScript
85
star
28

react-stateful

[No Maintenance Intended] A higher-order React component for lifting state
JavaScript
84
star
29

workshop

React Europe 2016 workshop repo
JavaScript
84
star
30

react-transform

A specification for tools instrumenting React components
68
star
31

disposables

Disposables let you safely compose resource disposal semantics
JavaScript
64
star
32

base16-js

Base16 themes in JS
JavaScript
35
star
33

redux-devtools-themes

Color themes for Redux DevTools monitors
JavaScript
34
star
34

react-for-beginners

This is my cloned version of the Wes Bos Series.
CSS
21
star
35

hooks-perf-issues

This repo demonstrates a situation where it is slower to use React hooks than classes
JavaScript
15
star
36

sc-bug-repro

CSS
15
star
37

testcomp

JavaScript
10
star
38

myapp

just testing lol
JavaScript
10
star
39

tictactoe

A LINQy TicTacToe implementation in C# for StackOverflow
C#
8
star
40

test.react.dev

(Work in progress) React documentation website in Test Test TEst
6
star
41

playtronica

A side project for a friend
JavaScript
5
star
42

redux-bootstrap

Bootstrapping function for Redux applications.
TypeScript
5
star
43

react-dnd-example

JavaScript
4
star
44

draft-js-borked

JavaScript
4
star
45

react-dnd-touch-backend

Touch Backend for react-dnd
JavaScript
3
star
46

gaearon.github.io

Oh hi.
HTML
3
star
47

jest-babel-issue

HTML
2
star
48

react-webpack

A starter template for building with React, Gulp and Webpack
JavaScript
2
star
49

jest-mock-issue-repro

JavaScript
2
star
50

rn-bug-loop

Kotlin
2
star
51

ulonkaFrontend01

JavaScript
1
star
52

HtmlWebpackReplaceManifestAssetsPlugin

A subplugin of the HtmlWebpackPlugin for replacing, in a html template, the assets with theis hashed versions
JavaScript
1
star