React Topography

A CLI tool to generate a topography of React component relationships.

Description

React Topography is a command-line tool that visualizes the component hierarchy and relationships in React applications. It generates an interactive static site displaying a flow from the root of the app to its components, allowing you to explore their connections.

Installation

pnpm install -g react-topography

Usage

Run the CLI from your project’s root directory, specifying the source directory where your React code resides (e.g., where main.tsx or app.tsx is located) using the -s flag.

Command

react-topography -s <source-directory>

Examples

If your React code is in the src directory:
```
react-topography -s ./src
```
If your React code is in packages/demo/src:
```
react-topography -s ./packages/demo/src
```

After running the command, the tool spins up a static site at http://localhost:4001/. The site displays an interactive visualization of your React app’s component relationships, where you can:

Drag nodes to reposition them
Zoom in and out
Move around the topography

Supported Environments

React Topography currently supports React applications created with:

Create React App
Vite

Note: Support for Next.js or Remix React apps is not yet available.

Limitations

The tool may have bugs, and some components might not be recognized.
It may not work well for default exports that are imported with a different name than the export name.

Contributing

Feel free to report issues or contribute to the project on GitHub. We welcome feedback and improvements!

License

MIT