Skip to content
aq-ui
Back to HooksHook

Use Tree View

Open-code aq-ui React hook for Use Tree View.

Installation

pnpm dlx aq-ui@alpha add use-tree-view

API reference

Client module

Import the parts you need, then jump to an export for its contract.

View full source

Quick start

"use client"

import { useTreeView } from "@/hooks/use-tree-view"

FlatTreeViewItem

interfaceSource L15

Type contract for FlatTreeViewItem.

interface FlatTreeViewItem<T>

Members

NameType
itemT
idstring
levelnumber
parentId?string
positionnumber
setSizenumber
hasChildrenboolean

TreeViewController

interfaceSource L69

Type contract for TreeViewController.

interface TreeViewController<T extends TreeViewItem>

Members

NameType
flatItemsFlatTreeViewItem<T>[]
selectedIdsstring[]
expandedIdsstring[]
focusedIdstring | undefined
draggedIdstring | undefined
setSelectedIds(ids: string[]) => void
setExpandedIds(ids: string[]) => void
select(id: string, additive?: boolean) => void
toggleExpanded(id: string, force?: boolean) => void
focusId(id: string) => void
focusIndex(index: number) => void
onKeyDownReact.KeyboardEventHandler<HTMLElement>
getItemProps<TElement extends HTMLElement>( id: string ) => TreeViewItemProps<TElement>

TreeViewItem

interfaceSource L8

Type contract for TreeViewItem.

interface TreeViewItem

Members

NameType
idstring
labelstring
children?TreeViewItem[]
disabled?boolean

TreeViewItemProps

interfaceSource L49

Type contract for TreeViewItemProps.

interface TreeViewItemProps<T extends HTMLElement>

Members

NameType
ref(element: T | null) => void
role"treeitem"
tabIndex0 | -1
aria-levelnumber
aria-posinsetnumber
aria-setsizenumber
aria-expandedboolean | undefined
aria-selectedboolean
aria-disabledboolean | undefined
draggableboolean
onFocus() => void
onClick(event: React.MouseEvent<T>) => void
onDoubleClick() => void
onDragStart(event: React.DragEvent<T>) => void
onDragOver(event: React.DragEvent<T>) => void
onDrop(event: React.DragEvent<T>) => void
onDragEnd() => void

TreeViewMoveEvent

interfaceSource L25

Type contract for TreeViewMoveEvent.

interface TreeViewMoveEvent

Members

NameType
sourceIdstring
targetIdstring
position"inside"

useTreeView

functionSource L149

Open-code aq-ui React hook for Use Tree View.

function useTreeView<T extends TreeViewItem>({ items, selectedIds: selectedIdsProp, defaultSelectedIds = EMPTY_IDS, onSelectedIdsChange, expandedIds: expandedIdsProp, defaultExpandedIds = EMPTY_IDS, onExpandedIdsChange, multiple = false, direction = "ltr", draggable = false, onMove,…): TreeViewController<T>
Returns
TreeViewController<T>

Parameters

NameType
optionsUseTreeViewOptions<T>

UseTreeViewOptions

interfaceSource L31

Type contract for UseTreeViewOptions.

interface UseTreeViewOptions<T extends TreeViewItem>

Members

NameTypeDefault
itemsT[]—
selectedIds?string[]—
defaultSelectedIds?string[]EMPTY_IDS
onSelectedIdsChange?(ids: string[]) => void—
expandedIds?string[]—
defaultExpandedIds?string[]EMPTY_IDS
onExpandedIdsChange?(ids: string[]) => void—
multiple?booleanfalse
direction?"ltr" | "rtl""ltr"
draggable?booleanfalse
onMove?(event: TreeViewMoveEvent) => void—
getId?(item: T) => stringdefaultGetId
getTextValue?(item: T) => stringdefaultGetText
getChildren?(item: T) => T[] | undefineddefaultGetChildren
isDisabled?(item: T) => booleandefaultIsDisabled

Registry dependencies

use-controllable-state, use-stable-callback

Files

  • hooks/use-tree-view.ts

Source