🌳 react-win7-treeview – Windows Explorer Style (7.css - wrapper)

A flexible Windows Explorer–style TreeView component for React, built with styled-components and framer-motion. Supports nested nodes, animated expand/collapse, connector lines, keyboard navigation, and RTL.

🚀 Live Demo

👉 Codesandbox

📦 Installation

npm install react-win7-treeview

🛠 Usage

import TreeView, { TreeViewItem } from "react-win7-treeview";

export default function App() {
  return (
    <TreeView showBorder lineType="rounded" lineColor="#999">
      <TreeViewItem label="Root Folder" defaultOpen>
        <TreeViewItem label="Child 1" />
        <TreeViewItem label="Child 2" defaultOpen>
          <TreeViewItem label="Grandchild A" />
          <TreeViewItem label="Grandchild B" />
        </TreeViewItem>
      </TreeViewItem>
    </TreeView>
  );
}

⚙️ <TreeView> Props

| Prop | Type | Default | Description | | ------------ | -------------------------------------------------- | ---------- | -------------------------------------------------- | | showBorder | boolean | false | Shows a Windows-style border around the whole tree | | isCollapse | boolean | false | Enables <details>/<summary> built-in collapse UI | | lineType | "none" | "solid" | "dotted" | "rounded" | "dotted" | Connector line style between parent & children | | lineColor | string | "#000" | Color of connector lines | | children | React.ReactNode | — | One or more <TreeViewItem> nodes | | className | string | — | Custom class for the outer <ul> |

⚙️ <TreeViewItem> Props

| Prop | Type | Default | Description | | --------------- | ------------------------------------------ | --------- | --------------------------------------------------- | | label | React.ReactNode | — | Label text or custom node | | value | any | — | Value passed to onSelect and onToggle callbacks | | defaultOpen | boolean | false | Whether the node is open by default (uncontrolled) | | expanded | boolean | — | Controlled open/close state | | onToggle | (expanded: boolean, value?: any) => void | — | Called when node toggles | | toggleMode | "row" | "label" | "label" | Toggle by clicking the whole row or just the label | | direction | "ltr" | "rtl" | "ltr" | Text direction (RTL support) | | controlBox | (open: boolean) => React.ReactNode | — | Custom expand/collapse control | | expandIcon | React.ReactNode | — | Custom icon when collapsed | | collapseIcon | React.ReactNode | — | Custom icon when expanded | | indent | number | 20 | Left padding for nested lists (px) | | showIcon | boolean | true | Whether to show the expand/collapse icon | | selected | boolean | false | Mark this node as selected | | onSelect | (value?: any) => void | — | Called when the node is selected | | disabled | boolean | false | Disable interactions | | onDoubleClick | (value?: any) => void | — | Fired on double click | | children | React.ReactNode | — | Nested <TreeViewItem> nodes | | className | string | — | Custom class for the node |

✨ Features

• Windows 7 / Explorer-style UI
• Animated expand & collapse using framer-motion
• Keyboard navigation (ArrowRight, ArrowLeft, Enter)
• Supports LTR / RTL layouts
• Flexible connector line types (none, solid, dotted, rounded)
• Custom icons, control box, and selection modes
• Optional double-click events and disabled state

📋 License

MIT / Delpi