react-composable-treeview v1.0.14
Composable Tree View
A composable, headless, fully accessible tree view component for react. This component is following radix philosophy and ARIA authoring practices. Keyboard navigation is fully supported.
Installation
Installation using npm
npm install react-composable-treeviewFile Explorer Exemple
import Accordion from 'react-composable-treeview';
<TreeView.Root>
<TreeView.Group value="/src">
<TreeView.Trigger>
<ChevronDownIcon />
src
</TreeView.Trigger>
<TreeView.Content>
<TreeView.Item value="/src/index.ts">index.ts</TreeView.Item>
<TreeView.Item value="/src/treeView.tsx">treeView.tsx</TreeView.Item>
</TreeView.Content>
</TreeView.Group>
<TreeView.Item value="/tsconfig.json">tsconfig.json</TreeView.Item>
<TreeView.Item value="/package.json">package.json</TreeView.Item>
</TreeView.Root>States
rootValue
The rootValue is a Set which contains the values of open groups. This state can be either controled or uncontroled.
selection
The selection keep track of the curent selected item or group. There can only be one selected element. This state can't be controled.
focus
The focus state keep track of the curent focused item or group. This state is managed the browser. This state can't be controled.
API Reference
Root
Contains all the parts of an tree view
| Prop | Type | Default |
|---|---|---|
| value | Set<string> | new Set() |
| defaultValue | Set<string> | new Set() |
| onValueChange | (Set<string>) => void | - |
| draggable | boolean | false |
Group
Contains all the parts of a collapsible group.
| Prop | Type | Default |
|---|---|---|
| value | string | "" |
| draggable | boolean | false |
| Data attribute | Values |
|---|---|
| data-state | "open" | "closed" |
| data-depth | number |
| aria-selected | "true" | "false" |
Item
Contains an item.
| Prop | Type | Default |
|---|---|---|
| value | string | "" |
| draggable | boolean | false |
| Data attribute | Values |
|---|---|
| data-depth | number |
| aria-selected | "true" | "false" |
| aria-expanded | "true" | "false" |
Trigger
Toggles the collapsed state of its associated group.
Content
Contains the collapsible content for an item.