react-hierarchy-visualizer
TypeScript icon, indicating that this package has built-in type declarations

0.1.4 • Public • Published

React Hierarchy Visualizer

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.

Features

  • 🌳 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

Installation

npm install @cursor/react-hierarchy-visualizer
# or
yarn add @cursor/react-hierarchy-visualizer

Usage

import { ComponentHierarchy } from '@cursor/react-hierarchy-visualizer';

function App() {
  return (
    <ComponentHierarchy
      rootComponent={
        <YourRootComponent>
          {/* Your component tree */}
        </YourRootComponent>
      }
    />
  );
}

Props

Prop Type Description
rootComponent ReactElement The root React component whose hierarchy you want to visualize

Example

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>
      }
    />
  );
}

Features

Component Information

  • Component name
  • File path
  • Props visualization
  • Interactive navigation

Visualization

  • Zoomable and draggable interface
  • Vertical tree layout
  • Smooth animations
  • Dark theme for better readability

Props Display

  • Consumed props with values
  • Passed props to children
  • Expandable/collapsible sections
  • Type indicators

Contributing

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

License

MIT © Cursor

Package Sidebar

Install

npm i react-hierarchy-visualizer

Weekly Downloads

0

Version

0.1.4

License

MIT

Unpacked Size

165 kB

Total Files

8

Last publish

Collaborators

  • syntaxhacker