React-component-tree-viewer NPM

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'>

react component tree viewer