react-win7-treeview
Version:
A Windows 7 styled TreeView component for React with animated expand/collapse, line connectors, and RTL support.
100 lines (75 loc) • 5.41 kB
Markdown
## 🌳 react-win7-treeview – Windows Explorer Style (7.css - wrapper)
[](https://www.npmjs.com/package/react-win7-treeview)
[](https://standardjs.com)
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](https://codesandbox.io/p/sandbox/pd9mvl)
---
### 📦 Installation
```bash
npm install react-win7-treeview
```
---
### 🛠 Usage
```tsx
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