React Component Tree Generator

A CLI tool to analyze a React project and generate a component tree in Markdown format for visualization with Markmap.

Features

• Automatically detects React components in a project.
• Generates a structured Markdown representation of the component hierarchy.
• Allows filtering of external library components.
• Supports scanning specific directories.

Installation

npm install -g react-component-tree-generator

Usage

react-tree [directory] [options]

Arguments

• directory (optional) - The root directory of your React project (default: current directory .).

Options

• --ignore-libs <libs...> - Ignore components imported from specified libraries.
• --project-only - Only include components defined within the project.
• --in <dirs...> - Restrict scanning to specific directories (relative to the project root).

Example Commands

Generate a component tree for the whole project:

react-tree ./my-react-app

Ignore external UI libraries:

react-tree ./my-react-app --ignore-libs react-bootstrap antd

Only scan specific directories:

react-tree ./my-react-app --in src/components src/pages

Include only project-defined components:

react-tree ./my-react-app --project-only

Output Format

The script generates a Markdown file componentsTree.mm.md in the following format:

---
title: Component Tree
markmap:
  colorFreezeLevel: 4
---

## Layout
- Navbar
- Home
  - SlideShowA
  - SlideShowB
- PersonalDetails
  - CardContainerA
    - Card
  - CardContainerB
    - Card

You can visualize this file using Markmap.

License

This project is licensed under the MIT License.