React Component Tree Viewer

A simple tool to visualize your React app's component tree structure.

Key features

• view props and state of your components (left click on component circle)
• expand or hide component's children (right click on component circle)
• expand or hide whole tree
• filter components displayed in the tree
• move and zoom in/out your component tree
• state and DOM changes in your app automatically update the tree
• you can choose the port on which the package will run

DO NOT INCLUDE THIS CODE IN PRODUCTION!

Instalation

You need to have react-devtools extension installed in your browser!

Install package in your devDependencies

$ yarn add react-component-tree-viewer --dev
$ npm install --save react-component-tree-viewer --save-dev

In your Command-line run the package and specify the port on which the package will be available

npx react-component-tree-viewer <port-number>

Import and launch the package in your index.jsx (or index.tsx) and pass the same port number as the one you passed in the Command-line

import App from './App'
import React from 'react'
import ReactDOM from 'react-dom'
import {launchReactComponentTreeViewer} from 'react-component-tree-viewer'
 
launchReactComponentTreeViewer(<port-number>)
 
ReactDOM.render(<App />, document.getElementById('root'))

Enjoy the magic on http://localhost:<'port-you-specified'>