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-treeview

File Explorer Exemple

import TreeView from 'react-composable-treeview';

function FileExplorer() {
    return (
        <TreeView.Root value={value} onValueChange={setValue}>
            <TreeView.Group index={0} value="/dist">
                <TreeView.Trigger>
                    dist
                </TreeView.Trigger>
                <TreeView.Content>
                    <TreeView.Item index={0} value="/dist/index.js">index.js</TreeView.Item>
                </TreeView.Content>
            </TreeView.Group>

            <TreeView.Group index={1} value="/src">
                <TreeView.Trigger>
                    src
                </TreeView.Trigger>
                <TreeView.Content>
                    <TreeView.Item index={0} value="/src/index.ts">index.ts</TreeView.Item>
                    <TreeView.Item index={1} value="/src/treeView.tsx">treeView.tsx</TreeView.Item>
                </TreeView.Content>
            </TreeView.Group>

            <TreeView.Item index={2} value="/tsconfig.json">tsconfig.json</TreeView.Item>
            <TreeView.Item index={3} 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()
defaultSelection	string	-
onValueChange	(Set<string>) => void	-
draggable	boolean	false

Group

Contains all the parts of a collapsible group.

The index property is required for keybinding to work. In a previous version of this package we tryed to infer the index but this was brittle and non-reactive. Now the package user has to specify the index itself.

Prop	Type	Default
value	string	""
index	number	-
draggable	boolean	false

Data attribute	Values
data-state	"open" | "closed"
data-depth	number
aria-selected	"true" | "false"

Item

Contains an item.

The index property is required for keybinding to work. In a previous version of this package we tryed to infer the index but this was brittle and non-reactive. Now the package user has to specify the index itself.

Prop	Type	Default
value	string	""
index	number	-
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.

Rescouces

ARIA Authoring Practices

Radix Philosophy

Guide to building composable, headless components

Guide to building react component lib