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

1. Search for "React-Depict" in VS Code's Extension Marketplace
2. Click "Install"
3. Restart VS Code

Usage

1. Open your React project folder in VS Code
2. Open the command palette (Cmd+Shift+P or Ctrl+Shift+P) and run "React-Depict: Start Visualization"
3. 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:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

If you find a bug or want to suggest a new feature, please let us know through GitHub Issues.