https://github.com/roman01la/react-dom-visualizer
Visualize components structure in your React application as a tree chart
https://github.com/roman01la/react-dom-visualizer
component-tree react tree-chart vdom visualization
Last synced: about 2 months ago
JSON representation
Visualize components structure in your React application as a tree chart
- Host: GitHub
- URL: https://github.com/roman01la/react-dom-visualizer
- Owner: roman01la
- License: mit
- Created: 2016-09-26T15:55:34.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-09-26T15:56:48.000Z (over 8 years ago)
- Last Synced: 2025-04-11T02:59:30.425Z (about 2 months ago)
- Topics: component-tree, react, tree-chart, vdom, visualization
- Language: JavaScript
- Size: 822 KB
- Stars: 22
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-dom-visualizer
*Visualize components structure in your React application as a tree chart*
## Installation
```
npm i -D react-dom-visualizer
```
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`.
## Usage
Run example app `cd example && npm run example:start`, open [localhost:3000](http://localhost:3000) in your browser.
```jsx
import visualize from 'react-dom-visualizer'; // should be included before React
import React from 'react';
import { render } from 'react-dom';
import App from './components/app';
render(, document.getElementById('app'));
// should be called after render
visualize({
selector: '#viz',
width: 1000,
height: 800,
displayLabels: false,
treeConfig: {
width: 1000,
height: 600
}
});
```
MIT