Hooked 🪝 - VS Code Extension

Hooked is a Visual Studio Code extension that analyzes React hooks in your project and generates a visual representation of their dependencies.

Features

• Analyzes custom React hooks in your project
• Generates a Mermaid diagram showing hook dependencies
• Displays the diagram in a webview panel
• Copies the Mermaid diagram code to your clipboard

Installation

1. Open Visual Studio Code
2. Go to the Extensions view (Ctrl+Shift+X or Cmd+Shift+X on macOS)
3. Search for Hooked
4. Click Install

Usage

1. Open a React project in VS Code
2. Open a file containing React hooks
3. Run the "Analyze hooks" command from the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on macOS)
4. The extension will analyze the hooks and display a Mermaid diagram in a new webview panel
5. The Mermaid diagram code will be copied to your clipboard

Requirements

• Visual Studio Code version 1.93.0 or higher

Extension Settings

This extension doesn't add any VS Code settings.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

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

This project is licensed under the MIT License.

Acknowledgements

• Mermaid for diagram generation
• esbuild for fast bundling

Enjoy using Hooked!