Skip to content

Visualize components structure in your React application as a tree chart

License

Notifications You must be signed in to change notification settings

roman01la/react-dom-visualizer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 in your browser.

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(<App />, document.getElementById('app'));

// should be called after render
visualize({
  selector: '#viz',
  width: 1000,
  height: 800,
  displayLabels: false,
  treeConfig: {
    width: 1000,
    height: 600
  }
});

MIT

About

Visualize components structure in your React application as a tree chart

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published