react-dom-visualizer - Visualize components structure in your React application as a tree chart

  •        497

This tool in using __REACT_DEVTOOLS_GLOBAL_HOOK__ which is also used by React Developer Tools. They are not working together. Make sure to disable React DevTools extension before running your app with react-dom-visualizer. Run example app cd example && npm run example:start, open localhost:3000 in your browser.

https://github.com/roman01la/react-dom-visualizer

Tags
Implementation
License
Platform

   




Related Projects

react-lifecycle-visualizer - Real-time visualizer for React lifecycle methods

  •    Javascript

An npm package (react-lifecycle-visualizer) for tracing & visualizing lifecycle methods of arbitrary React components. To trace a component, apply the higher-order component traceLifecycle to it, and all its lifecycle-method calls will show up in a replayable log component. Additionally, traced components may include a <this.props.LifecyclePanel/> element in their rendering to show a panel with lifecycle methods, which are highlighted when the corresponding log entry is selected.

Realize - A React component tree visualizer

  •    Javascript

As React applications scale, it becomes more difficult to track state and to have a holistic overview of the component hierarchy. Realize is a tool to help developers visualize the structure and state flow of their React applications, especially when they are growing in scale and complexity. It currently supports React v.16.8.

react-d3-components - D3 Components for React

  •    Javascript

Let React have complete control over the DOM even when using D3. This way we can benefit from Reacts Virtual DOM. to start a webserver, and navigate to http://localhost:8000/example in order to visualize the new example page. Note that the example page directly points to the dist folder.

react-tunnels - 🚇 Render React components in placeholders that are placed somewhere else in the component tree

  •    Javascript

Render React components in placeholders that are placed somewhere else in the component tree. There is a common use case in React apps where you want to define a Layout where the content of some elements is defined by children components. For example, you want to define Layout just once and reuse it for every page but it has a breadcrumb whose steps depend on children components. This tiny library allows you to define tunnels to render from an element to whatever another element in the App, even elements located on top of the tree. It's like Portal but the target is a component instead of a DOM element.


tree - React Tree

  •    Javascript

Tree component. note: if you have a lot of TreeNode, like more than 1000, make the parent node is collapsed by default, will obvious effect, very fast. Because the children hide TreeNode will not insert into dom.

Expression Tree Visualizer for VS 2010

  •    

The entire project is a "visualizer" that displays the expression tree nodes and node attributes. only important attributes are selected to be appended to the visualization tree in order to keep it simple and useful.

rxviz - Rx Visualizer - Animated playground for Rx Observables

  •    Javascript

RxViz simply visualizes a given Observable. Your JavaScript code will be evaluated, and, if the last expression is an Observable, a nice animated visualization will appear. RxViz treats the evaluated Observable as a black box. We rely only on the fact that Observable emits values over time. RxViz doesn't rely on the internals of RxJS. This will allow us to visualize TC39 Observables in the future.

react-syntax-highlighter - syntax highlighting component for react with prismjs or highlightjs ast using inline styles

  •    Javascript

Check out a small demo here and see the component in action highlighting the generated test code here. There are other syntax highlighters for React out there so why use this one? The biggest reason is that all the others rely on triggering calls in componentDidMount and componentDidUpdate to highlight the code block and then insert it in the render function using dangerouslySetInnerHTML or just manually altering the DOM with native javascript. This utilizes a syntax tree to dynamically build the virtual dom which allows for updating only the changing DOM instead of completely overwriting it on any change, and because of this it is also using more idiomatic React and allows the use of pure function components brought into React as of 0.14.

react-markdown - Markdown component for React

  •    Javascript

react-markdown is a Markdown component for React using remark. There are other ways for markdown in React out there so why use this one? The two main reasons are that they often rely on dangerouslySetInnerHTML or have bugs with how they handle markdown. react-markdown uses a syntax tree to build the virtual dom which allows for updating only the changing DOM instead of completely overwriting. react-markdown is 100% CommonMark (optionally GFM) compliant and has extensions to support custom syntax.

react-vis - Data-Visualization oriented components

  •    Javascript

A collection of react components to render common data visualization charts, such as line/area/bar charts, heat maps, scatterplots, contour plots, pie and donut charts, sunbursts, radar charts, parallel coordinates, and tree maps.Install react-vis via npm.

react-ui-tree - React tree component

  •    Javascript

This project was initially developed for a webpage builder. It maintains an internal tree structure within the component through js-tree.

react-native-pathjs-charts - Android and iOS charts based on react-native-svg and paths-js

  •    Javascript

This library is a cross-platform (iOS/Android) library of charts/graphs using react-native-svg and paths-js based on the excellent work done by Roman Samec in the react-pathjs-chart library. The project is an early attempt at providing a ubiquitous solution for charts & graphs for React Native that offer a unified view across devices. Components include Pie charts, Bar charts, Smoothline charts, Stockline charts, Scatterplots, Tree graphs and Radar graphs. Since Paths-Js makes no assumptions about rendering, this library is perfect for using SVG path objects to render custom charts easily.

react-game-kit - Component library for making games with React & React Native

  •    Javascript

react-game-kit provides a set of helper components to make it easier to create games with React and React Native.The Loop component uses context to pass a subscribable game tick down your component tree. The Stage component does the same with game scale.

reaviz - 📊 Data visualization library for React based on D3

  •    TypeScript

REAVIZ is a modular chart component library that leverages React natively for rendering the components while using D3js under the hood for calculations. The library provides an easy way to get started creating charts without sacrificing customization ability.

reaviz - 📊 Data visualization library for React based on D3

  •    TypeScript

REAVIZ is a modular chart component library that leverages React natively for rendering the components while using D3js under the hood for calculations. The library provides an easy way to get started creating charts without sacrificing customization ability. If you are looking for node-based graphs, checkout reaflow.

Recharts - Redefined chart library built with React and D3

  •    Javascript

Recharts is a Redefined chart library built with React and D3. It can be easily deployed with React components. It has SVG support, lightweight depending only on some D3 submodules. All the components of Recharts are clearly separated.

tree-select - React Tree Select

  •    Javascript

note: you'd better to use treeData instead of using TreeNode. rc-tree-select is released under the MIT license.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.