mirror of https://github.com/reduxjs/redux-devtools.git synced 2024-11-24 02:23:57 +03:00

History

Nathan Bierema ba5bd18d5b Publish - remotedev-redux-devtools-extension@3.0.0 - d3-state-visualizer@1.4.2 - d3tooltip@1.3.2 - map2tree@1.5.2 - react-base16-styling@0.8.2 - react-dock@0.4.2 - react-json-tree@0.15.2 - @redux-devtools/app@1.0.0 - @redux-devtools/chart-monitor@1.9.2 - @redux-devtools/cli@1.0.0 - @redux-devtools/dock-monitor@1.4.2 - @redux-devtools/extension@3.0.0 - @redux-devtools/inspector-monitor-test-tab@0.7.4 - @redux-devtools/inspector-monitor-trace-tab@0.2.4 - @redux-devtools/inspector-monitor@1.0.2 - @redux-devtools/instrument@1.11.2 - @redux-devtools/log-monitor@2.3.2 - @redux-devtools/remote@0.6.1 - @redux-devtools/rtk-query-monitor@1.0.2 - @redux-devtools/serialize@0.3.2 - @redux-devtools/slider-monitor@2.0.0 - @redux-devtools/ui@1.0.0 - @redux-devtools/utils@1.0.0 - @redux-devtools/core@3.9.2 - d3-state-visualizer-tree-example@0.1.2 - react-dock-demo@0.1.2 - react-json-tree-example@1.1.4 - test-demo@0.1.2 - inspector-demo@0.1.2 - rtk-query-demo@0.1.2 - slider-todomvc@0.1.4 - counter-redux@0.1.4 - todomvc@0.2.3		2022-01-07 21:24:58 -05:00
..
src	chore(*): switch to Yarn Plug'n'Play (#871 )	2021-09-19 21:59:01 +00:00
.babelrc	chore(*): clean up babel configs (#816 )	2021-08-29 23:25:48 +00:00
.eslintignore	feat(redux-devtools-chart-monitor): convert to TypeScript (#642 )	2020-09-21 21:23:38 -04:00
.eslintrc.js	chore(*): move devDependencies back to packages (#870 )	2021-09-18 23:47:03 +00:00
CHANGELOG.md	chore(*): run prettier	2021-03-06 10:51:16 -05:00
LICENSE.md	chore(*): add back license files (#578 )	2020-08-09 01:11:43 -04:00
package.json	Publish	2022-01-07 21:24:58 -05:00
README.md	chore(*): make more packages scoped (#692 )	2020-12-21 15:46:28 -05:00
tsconfig.json	feat(redux-devtools-chart-monitor): convert to TypeScript (#642 )	2020-09-21 21:23:38 -04:00

README.md

Redux DevTools Chart Monitor

A chart monitor for Redux DevTools.

Created by @romseguy and merged from reduxjs/redux-devtools-chart-monitor.

It shows a real-time view of the store aka the current state of the app.

🚀 Now with immutable-js support.

Demo (Source)

Installation

yarn add @redux-devtools/chart-monitor

Usage

You can use ChartMonitor as the only monitor in your app:

`containers/DevTools.js`

import React from 'react';
import { createDevTools } from '@redux-devtools/core';
import ChartMonitor from '@redux-devtools/chart-monitor';

export default createDevTools(<ChartMonitor />);

Then you can render <DevTools> to any place inside app or even into a separate popup window.

Alternatively, you can use it together with DockMonitor to make it dockable.
Consult the DockMonitor README for details of this approach.

Read how to start using Redux DevTools.

Features

Props

ChartMonitor props

You can read the React component propTypes in addition to the details below:

Name	Description
`defaultIsVisible`	By default, set to `true`.
`transitionDuration`	By default, set to `750`, in milliseconds.
`heightBetweenNodesCoeff`	By default, set to `1`.
`widthBetweenNodesCoeff`	By default, set to `1.3`.
`isSorted`	By default, set to `false`.
`style`	{ width: '100%', height: '100%', // i.e fullscreen for `DockMonitor` text: { colors: { 'default': `theme.base0D`, hover: `theme.base06` } }, node: { colors: { 'default': `theme.base0B`, collapsed: `theme.base0B`, parent: `theme.base0E` }, radius: 7 } }
`onClickText`	Function called with a reference to the clicked node as first argument when clicking on the text next to a node.
`tooltipOptions`	{ disabled: false, indentationSize: 2, style: { 'background-color': `theme.base06`, 'opacity': '0.7', 'border-radius': '5px', 'padding': '5px' } } More info.

Redux DevTools props

Name	Description
`theme`	Either a string referring to one of the themes provided by redux-devtools-themes (feel free to contribute!) or a custom object of the same format. Optional. By default, set to `'nicinabox'`.
`invertTheme`	Boolean value that will invert the colors of the selected theme. Optional. By default, set to `false`
`select`	A function that selects the slice of the state for DevTools to show. For example, `state => state.thePart.iCare.about`. Optional. By default, set to `state => state`.

License

MIT