redux-devtools-chart-monitor alternatives and similar libraries
Based on the "Redux" category.
Alternatively, view redux-devtools-chart-monitor alternatives based on common mentions on social networks and blogs.
-
redux-devtools
DevTools for Redux with hot reloading, action replay, and customizable UI -
Reactime 6.0: State Debugger for React
Developer tool for time travel debugging and performance monitoring in React applications. -
remote-redux-devtools
Redux DevTools remotely. -
Refract
Harness the power of reactive programming to supercharge your components -
redux-beacon
Analytics integration for Redux and ngrx/store -
redux-devtools-dock-monitor
A resizable and movable dock for Redux DevTools monitors -
redux-devtools-log-monitor
The default monitor for Redux DevTools with a tree view -
redux-devtools-inspector
Another Redux DevTools Monitor. -
#<Sawyer::Resource:0x00007f8b44d36950>
基于React开发的新一代web调试工具,支持React组件调试,类似于Chrome Devtools。A Lightweight, Easy To Extend Web Debugging Tool Build With React -
redux-devtools-filterable-log-monitor
Filterable tree view monitor for Redux DevTools -
react-redux-api-tools
A set of tools to facilitate react-redux development and decouple logic from compontents
A Non-Cloud Alternative to Google Forms that has it all.
Do you think we are missing an alternative of redux-devtools-chart-monitor or a related project?
README
Redux DevTools Chart Monitor
This package was merged into redux-devtools
monorepo. Please refer to that repository for the latest updates, issues and pull requests.
A chart monitor for Redux DevTools.
It shows a real-time view of the store aka the current state of the app.
:rocket: Now with immutable-js support.
Installation
npm install --save-dev 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';
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
*Note that all licence references and agreements mentioned in the redux-devtools-chart-monitor README section above
are relevant to that project's source code only.