Overview Version History Q & A Rating & Review
React-Depict
React-Depict is a VS Code extension that visually represents the structure and dependencies of React components.
Key Features
🎯 React Component Structure Visualization
🔄 Component Dependency Mapping
📊 Props and State Flow Analysis
🎨 Intuitive Diagram Interface
🔍 Component Search and Filtering
📱 Responsive Design Support
Installation
Search for "React-Depict" in VS Code's Extension Marketplace
Click "Install"
Restart VS Code
Usage
Open your React project folder in VS Code
Open the command palette (Cmd+Shift+P
or Ctrl+Shift+P
) and run "React-Depict: Start Visualization"
Click the React-Depict icon in the sidebar to open the visualization panel
Extension Settings
This extension contributes the following settings:
reactDepict.autoVisualize
: Automatically start visualization when opening a project (default: false)
reactDepict.excludeFolders
: List of folders to exclude from visualization
reactDepict.theme
: Diagram theme setting ('light' or 'dark')
Supported Features
TypeScript/JavaScript React component support
Function and Class component analysis
React Hooks usage pattern visualization
Context API dependency display
Custom component styling support
Known Issues
Dynamic component generation may affect analysis accuracy
Initial visualization might take time in large projects
Release Notes
1.0.0 (2024-03-XX)
Initial release
Basic component visualization
Light/Dark theme support
TypeScript/JavaScript support
Contributing
If you'd like to contribute to this project:
Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature
)
Commit your changes (git commit -m 'Add some AmazingFeature'
)
Push to the branch (git push origin feature/AmazingFeature
)
Open a Pull Request
License
Distributed under the MIT License. See LICENSE
for more information.
If you find a bug or want to suggest a new feature, please let us know through GitHub Issues.