React-hierarchy-visualizer NPM

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