DEV Community

Cover image for ­čöŹVisualizing the Calling Hierarchy of React Components in the Browser­čśŐ
j1ngzoue
j1ngzoue

Posted on • Updated on

­čöŹVisualizing the Calling Hierarchy of React Components in the Browser­čśŐ

Introduce

It is very difficult to grasp the whole picture of a component just by looking at the code such as vscode. We often use tools such as Figma to create diagrams and sequences, but this is a very costly process. In order to solve this problem, we have created and released a library to visualize react components as diagrams in a browser. It is still a work in progress, so many considerations may be missing.

Demo

react-component-analyzer is a library that is useful when exchanging PR or design discussions with friends, as it allows you to visualize the component tree as a diagram and discuss it based on a common understanding. It will also help you to understand the scope of impact when you modify the implementation.
I hope it helps you to design better components.

Point

  • Using the popular library, @typescript-eslint/typescript-estree AST to do the analysis.
  • By using VSCode's schema in the Browser, you can quickly check the implementation of components you are interested in.
  • If you are using vite without setting it in the config file, you can resolve the alias from vite.config.ts.
  • It uses prismjs, which allows for code reading that is more like an IDE.

Demo

Image description

Install

npm i -D visualize-react-component
Enter fullscreen mode Exit fullscreen mode

Usage

By specifying the React root file and the component files, it will parse them and output the stats.html file.

npm run rca ./src/main.tsx
Enter fullscreen mode Exit fullscreen mode

I'm waiting for your feedback.

Top comments (2)

Collapse
 
activeguild profile image
j1ngzoue

I'm sorry.
I've fixed it if it was out of date or not.
Thank you.

before

npm run virot ./src/main.tsx
Enter fullscreen mode Exit fullscreen mode

after

npm run rca ./src/main.tsx
Enter fullscreen mode Exit fullscreen mode
Collapse
 
ihordoroschenko profile image
Ihor

npm error missing script virot... unfortunately, it does not work