A beautiful and interactive React component hierarchy visualization tool. This package provides a tree visualization of your React component hierarchy with detailed props information and file navigation capabilities.
- 🌳 Interactive tree visualization of React component hierarchy
- 📊 Detailed view of consumed and passed props
- 📁 Direct file navigation capabilities
- 🎨 Beautiful, dark-themed UI
- 🔍 Expandable/collapsible prop information
- 🖱️ Zoom and pan capabilities
npm install @cursor/react-hierarchy-visualizer
# or
yarn add @cursor/react-hierarchy-visualizer
import { ComponentHierarchy } from '@cursor/react-hierarchy-visualizer';
function App() {
return (
<ComponentHierarchy
rootComponent={
<YourRootComponent>
{/* Your component tree */}
</YourRootComponent>
}
/>
);
}
Prop | Type | Description |
---|---|---|
rootComponent | ReactElement | The root React component whose hierarchy you want to visualize |
import { ComponentHierarchy } from '@cursor/react-hierarchy-visualizer';
function App() {
return (
<ComponentHierarchy
rootComponent={
<div>
<Header>
<Navigation items={['Home', 'About', 'Contact']} />
<SearchBar onSearch={(query) => console.log(query)} />
</Header>
<MainContent>
<Sidebar />
<ArticleList articles={articles} />
</MainContent>
<Footer />
</div>
}
/>
);
}
- Component name
- File path
- Props visualization
- Interactive navigation
- Zoomable and draggable interface
- Vertical tree layout
- Smooth animations
- Dark theme for better readability
- Consumed props with values
- Passed props to children
- Expandable/collapsible sections
- Type indicators
Contributions are welcome! Please feel free to submit a Pull Request.
MIT © Cursor