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 using npm
npm install react-composable-treeview
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>
The rootValue
is a Set which contains the values of open groups. This state can be either controled or uncontroled.
The selection
keep track of the curent selected item or group. There can only be one selected element. This state can't be controled.
The focus
state keep track of the curent focused item or group. This state is managed the browser. This state can't be controled.
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 |
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" |
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" |
Toggles the collapsed state of its associated group.
Contains the collapsible content for an item.